Javascript 在现代社会，如何将事件从孙辈传递给祖辈？

如果我有多个级别的角度组件，如何使用

@Output

事件从子级向父级发出动作

祖父母：

<parent (handleClick)="grandmaHandleClick($event)">
<parent>
...
grandmaHandleClick(event) {
  console.log('grandma knows you clicked')
}

...
grandmaHandleClick（事件）{
log（'奶奶知道你点击了'）
}

家长：

<child (handleClick)="handleClick($event)">
</child>

儿童：

<div (click)="onClick()">Click button
</div>
...
@Output() handleClick = new EventEmitter
onClick() {
  this.handleClick.emit('clicked a button')
}

点击按钮
...
@Output（）handleClick=neweventemitter
onClick（）{
this.handleClick.emit（'单击按钮'）
}

我正在尝试使用它，以便@Output可以支持深入钻取一些组件，实现这一点的最佳方法是什么，您可以提供示例吗？

有两种方法：

使用

@输出

：

祖父母

<parent (notifyGrandParent)="grandmaHandleClick($event)">
<parent>
...
grandmaHandleClick(event) {
  console.log('grandma knows you clicked')
}

export class ChildComponent{
   constructor(private evtSvc: EventService){}

   onClick(){
     this.evtSvc.emitChildEvent('clicked a button')
   }
}

export class GrandComponent{
   constructor(private evtSvc: EventService){}

   ngOnInit(){
     this.evtSvc.childEventListner().subscribe(info =>{
         console.log(info); // here you get the message from Child component
      })
   }
}

然后在

组件中

：

ChildComponent

<parent (notifyGrandParent)="grandmaHandleClick($event)">
<parent>
...
grandmaHandleClick(event) {
  console.log('grandma knows you clicked')
}

export class ChildComponent{
   constructor(private evtSvc: EventService){}

   onClick(){
     this.evtSvc.emitChildEvent('clicked a button')
   }
}

export class GrandComponent{
   constructor(private evtSvc: EventService){}

   ngOnInit(){
     this.evtSvc.childEventListner().subscribe(info =>{
         console.log(info); // here you get the message from Child component
      })
   }
}

祖父母

<parent (notifyGrandParent)="grandmaHandleClick($event)">
<parent>
...
grandmaHandleClick(event) {
  console.log('grandma knows you clicked')
}

export class ChildComponent{
   constructor(private evtSvc: EventService){}

   onClick(){
     this.evtSvc.emitChildEvent('clicked a button')
   }
}

export class GrandComponent{
   constructor(private evtSvc: EventService){}

   ngOnInit(){
     this.evtSvc.childEventListner().subscribe(info =>{
         console.log(info); // here you get the message from Child component
      })
   }
}

请注意，通过

@output

事件，您创建了组件的紧密耦合，因此创建了强依赖（父子孙）。如果组件是不可重用的，并且只是为了达到这个目的而创建的，那么

@output

也会有意义，因为它会向任何新开发人员传达这样一个信息：他们有父子关系

创建服务来传递数据也会将数据暴露给其他组件，这些组件可以在

构造函数中注入
服务

因此，应相应地作出决定
 使用rxjs/subject
它可以同时是观察者和可观察者

用法：

1.创建服务中的标的财产：

import { Subject } from 'rxjs';

export class AuthService {
   loginAccures: Subject<boolean> = new Subject<boolean>();
}

3.并在父页面/组件中订阅主题：

constructor(private authService: AuthService) {
    this.authService.loginAccures.subscribe((isLoggedIn: boolean) => {this.isLoggedIn = isLoggedIn;})
}

为此，有一个很棒的图书馆。可以使用此库将事件从任何组件发送到任何组件

该库提供了创建-


广播者-向多个接收器发送多个事件的一个消息点


侦听器-从多个连接侦听的一个消息点



只需使用和主题/行为主题即可。在第一种方法中，“@output”不会在子组件上吗？@user2167582:您已经使用
子组件中的
@output（）handleClick
正确地处理了它，这就是为什么我没有提到它。让我补充一下well@user2167582您是否尝试过我建议实施
服务的另一种方法谢谢，我尝试过了，而且效果很好。问这个问题时，我也很好奇是否有一种方法可以向下传递（boundedEvent）组件，而不必添加处理程序方法来发送回层次结构，这似乎是必需的。@user2167582:如果它只是父级组件的一个级别，您可以在child中使用
@Input
和
ngOnChange
来监视传递给
子组件的值的变化。否则，如果它是多层组件结构，您可以再次使用
BehaviorSubject
Charlie，您应该确保指出您与此项目的任何关联，否则您将与反垃圾邮件政策发生冲突。下次你到加勒费斯酒店时，请帮我挥手。