为Angular根组件/模块指定@Input()参数 [英] Specify @Input() parameter for Angular root component/module

问题描述

我有3个由根AppModule引导的根组件.

I have 3 root components that get bootstrapped by the root AppModule.

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

How do you go about specifying an @Input() parameter to one of those components?

都不是

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

被AppModalComponent拾取:

@Input() id: string;

它是未定义的.

推荐答案

据我所知，您不能将@Input()传递给引导的组件.

As far as I know, you can not pass @Input() to a bootstraped component.

但是您可以使用另一种方法-将值作为属性传递.

But you can use another way to do that - pass the value as an attribute.

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');
    }
}

这篇关于为Angular根组件/模块指定@Input()参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！