为角根组件/模块指定@input()参数

Question

我有3个根组件，可以由root 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

as @grégorygossart说，您无法将@Input数据作为bootstreate组件正常传递。

这是因为@Input有望来自角度组件。因此，如果您的root应用程序已加载/直接在HTML中加载/bootstrstrstr，则我认为将提供什么@Input，我认为。

好的练习对许多角文档发表了评论，可能是因为它具有特定的行为，您只能引导一个root应用程序。我认为您的选项是添加一个root应用程序，您可以引导您引导您的其他应用程序(3(并将其用作模板。然后正常传递@Input。真的没什么特别的。

我认为，如果您决定需要引导所有数据并需要外部数据，则可以将数据传递给root应用程序的数据。但是我觉得这更多地指的是特定目的。

编辑：我花了一些时间找到了过去的一天我读过的这个博客，以及我对@Injectable说的原因。因此值得作者，但有趣的东西。在引导Angular 2