Angular 4在不使用服务的情况下从另一个组件执行功能

Posted 2023-03-13

【中文标题】Angular 4在不使用服务的情况下从另一个组件执行功能

【英文标题】：Angular 4 execute function from another component without using Services

【发布时间】：2018-09-12 09:34:55

【问题描述】：

我有一个登录组件，在这个组件中，我使用对话框进行动态登录，也可以从其他组件访问。在这个组件中，我们有注销功能（注销用户）。 那么我如何从登录组件中存在的其他组件执行注销功能。

导出类 loginComponent 实现 OnInit

let postdata = 
     email:email,
     password:password
 

  this.register.customerLogin(postdata).subscribe( (response) =>  response; );

注销()

 localStorage.removeItem('cemail');
 localStorage.removeItem('cname');
 localStorage.removeItem('cid');
 localStorage.removeItem('token');

谢谢

【问题讨论】：

从您的任意要求中删除“不使用服务”，因为服务正是您应该使用的。

没错！使用服务

@DavidVotrubec 感谢您的回答。有没有其他方法可以做到这一点？

是的，您可以使用自定义事件来使 DOM 冒泡，然后对这些事件做出反应，但这需要更多的工作，这取决于您的组件在 DOM 中如何相互关联。所以服务是最简单和推荐的方式

感谢@DavidVotrubec

【参考方案1】：

服务更好，但如果你想执行子组件方法，你可以使用 @ViewChild()

export class AppComponent implements AfterViewInit 

 @ViewChild(ChildComponent) child: ChildComponent;

 ngAfterViewInit() 
  console.log(this.child.myMethod());
 

【参考方案2】：

服务是更好的选择，但您可以使用 @Output 和 EventEmitter 创建事件并从子级发送到父级，并使用 @Input 将数据从父级传递到子级。