时间戳

首页 > 解决方案 > 如何在 Angular 中为外界获取输入并引发事件？

javascript - 如何在 Angular 中为外界获取输入并引发事件？

问题描述

我想知道如何从外部世界获取输入并引发冒泡到外部世界的自定义事件（即在角度组件之外）。我知道我无法进入@Input()根组件。那我该怎么做：

  1. 从 Angular 外部将一组对象（比如T[]）传递给我的 Angular 组件<app-root>。
  2. 引发一个事件<app-grandchild>，使事件从角度组件中冒出并命中 DOM 树根或<body>.

假设以下 DOM 层次结构：

<body>
  <app-root>
    <app-child>
      <app-grandchild></app-grandchild>
    </app-child>
  </app-root>
</body>

标签： javascriptangulartypescript

解决方案

您的问题需要解释 Angular 中的几个概念：组件交互和内容投影​​。

我整理了一个示例，将两者结合起来以满足您在问题中描述的内容：

@Component({
  selector: 'app-child',
  template: `
  <ul>
      <li *ngFor="let obj of arrayOfObjects"> {{ obj.id }} </li>
  </ul>
  <ng-content></ng-content>
  `,
})
class AppChildComponent {
    @Input() arrayOfObjects: object[];
}

@Component({
  selector: 'app-grandchild',
  template: `Am the grandchild!`,
})
class AppGrandChildComponent implements OnInit {
    @Output() somethingHappened = new EventEmitter<string>();

  ngOnInit(){
    this.somethingHappened.emit('yellow');
  }
}


@Component({
  selector: 'app-root',
  template: `
    <app-child [arrayOfObjects]="[
      {id: '123'},
      {id: '456'}
    ]">
        <app-grandchild 
          (somethingHappened)="handleSomething($event)">
        </app-grandchild>
    </app-child>
  `,
})
class AppComponent {
    handleSomething(event){
    document.body.style.backgroundColor = event;
  }
}

完整示例：https ://jsfiddle.net/c945j08v/1/

我强烈建议您阅读更多关于 Angular 文档和博客的内容。

我希望这有帮助。

推荐阅读