为 Angular root component/module 指定 @Input() 参数

Question

我有 3 个根组件由根 AppModule 引导。

如何为这些组件之一指定 @Input() 参数？

都没有

<app-modal [id]="'hard-coded value'"></app-modal>
<app-modal [id]="constantExportedByAppmodule"></app-modal>

被AppModalComponent接走：

@Input() id: string;

未定义。

Answer 1

据我所知，您不能将 @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');
    }
}

Answer 2

正如@Grégory Gossart 所说，对于 bootstraped 组件，您不能正常传递 @Input 数据。

这是因为 @Input 应该来自 angular 组件。所以，如果你的根应用程序是 loaded/bootstraped 直接在 HTML 中，它没有参考我想提供的 @Input。

正如许多 Angular 文档中评论的良好做法，并且可能因为它的特定行为，您应该只 bootstrap 一个根应用程序。我认为您在这里的选择是添加一个根应用程序，您 bootstrap 并导入您的其他应用程序 (3) 并将它们用作其中的模板。然后照常传递@Input。真的没什么特别的。

如果您决定需要 bootstrap 所有这些数据并需要外部数据，我认为另一种选择是将数据从 @Injectable 传递到您的根应用程序。但是我感觉更多的是针对特定的目的。

编辑：我花了一些时间来找到我昨天读过的这个博客，以及我为什么说 @Injectable 的原因。所以对作者来说是值得的，但有趣的东西。 Providing external data when bootstrapping Angular 2

为 Angular root component/module 指定 @Input() 参数

Specify @Input() parameter for Angular root component/module

angular-bootstrap

angular