Angular 2 子组件接收祖先事件

Angular 2 child component receive ancestor event

本文关键字：祖先 事件 组件 Angular      更新时间：2023-09-26

我有一个 Angular 组件，它依赖于根应用程序组件上发生的单击事件。孩子位于<app>组件内的随机位置，因此我没有列出它。

@Component({
   template: '<div>Child!</div>'
})
export class Child {
   constructor () {}
}
@Component({
   selector: 'app',
   template: '<div (click)=foo()></div>'
})
export class App {
   rootClickEmitter = new EventEmitter();
   foo () {
      this.rootClickEmitter.emit('bar');
   }
}

如何让子组件接收 rootClickEmitter 事件？

对于"点击外部"，请尝试以下操作：

@Component({
  selector: 'child',
  template: '<div (click)="childClick($event)">child content here</div>',
  host: { '(document:click)': 'docClick()' }
})
export class Child {
  docClick() {
    console.log('clicked outside');
  }
  childClick(ev) {
    console.log('child click');
    ev.stopPropagation();
  }
}

普伦克

更新：埃里克刚刚在另一个答案中发布了以下内容：

"您可以使用listenGlobal，它将使您能够访问文档，正文等。

renderer.listenGlobal('document', 'click', () => {
  console.log('Document clicked');
});
相关文章：