我有 3 个由根 AppModule 引导的根组件。
如何为这些组件之一指定 @Input() 参数？
没有
<app-modal [id]="'hard-coded value'"></app-modal>
<app-modal [id]="constantExportedByAppmodule"></app-modal>
被AppModalComponent接走：
@Input() id: string;
未定义。
【问题讨论】：
id？
据我所知，您不能将 @Input() 传递给引导组件。
但是您可以使用另一种方式来做到这一点 - 将值作为属性传递。
index.html：
<my-app myAttribute="myAttributeValue">
<div>Loading...</div>
</my-app>
app.component.ts ：
@Component({
selector: 'my-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
constructor(private elementRef:ElementRef) {
let myAttribute = this.elementRef.nativeElement.getAttribute('myAttribute');
}
}
【讨论】：
ElementRef 的任何使用。有关更多详细信息，请参阅 Security Guide。”
this.myattribute = this.sanitizer.sanitize(SecurityContext.HTML, this.elementRef.nativeElement.getAttribute('myattribute'))
正如@Grégory Gossart 所说，您不能像往常一样为引导组件传递@Input 数据。
这是因为 @Input 应该来自一个角度组件。因此，如果您的根应用程序直接在 HTML 中加载/引导，我认为它没有参考将提供 @Input 的内容。
正如许多 Angular 文档所评论的良好实践，并且可能因为它具有特定的行为，您应该只引导一个根应用程序。我认为您在这里的选择是添加一个您引导的根应用程序，它会导入您的其他应用程序（3）并将它们用作其中的模板。然后像往常一样传递@Input。真的没什么特别的。
如果您决定需要引导所有应用程序并需要外部数据，我认为另一种选择可能是将数据从 @Injectable 传递到您的根应用程序。但我觉得它更多地是针对特定目的。
编辑：我花了一些时间找到了我过去一天读过的这个博客，以及我提到 @Injectable 的原因。所以对作者来说很有价值，但很有趣。 Providing external data when bootstrapping Angular 2
【讨论】：