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（）传递给bootstraped组件。

但是你可以用另一种方法来做 - 将值作为属性传递。

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égoryGossart所说，你无法像引导组件那样正常传递@Input数据。

这是因为@Input预计来自角度分量。所以，如果您的根应用程序直接在HTML中加载/引导它没有参考@Input会提供什么，我想。

好的做法评论了很多Angular文档，可能因为它的具体行为，你应该只引导一个根App。我认为你的选择是添加一个你引导的根应用程序，然后导入你的其他应用程序（3）并将其作为模板使用。然后正常传递@Input。真的没什么特别的。

我认为如果您决定需要引导所有这些数据并需要外部数据，那么另一个选项可能是将数据从@Injectable传递到您的根应用程序。但我觉得它更多地涉及特定目的。

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

为Angular根组件/模块指定@Input（）参数

2 个答案: