我想知道如何从外部世界获得输入并引发冒泡到外部世界的自定义事件（即在角度组件之外）。我明白我不能在根组件中获得@Input()。那我该怎么做呢：
T[]）从角度外部传递给我的Angular组件<app-root>。<app-grandchild>举起一个事件，使得事件从角度成分中冒出来并击中DOM树根或<body>。假设以下DOM层次结构：
<body>
<app-root>
<app-child>
<app-grandchild></app-grandchild>
</app-child>
</app-root>
</body>
您的问题需要解释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 Docs＆Blog的更多信息。
我希望这有帮助。