角型コンポーネント/モジュールの@Input（）パラメータを指定します

Question

ルートAppModuleによってブートストラップされる3つのルートコンポーネントがあります。

これらのコンポーネントの1つに@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 @として、あなたはブートストラップコンポーネントのため通常通り@Inputデータを渡すことはできませんと述べました。

@Inputは角度成分から来ると予想されるためです。だから、あなたのルートアプリケーションがHTMLに直接ロード/ブートストラップされていれば、@Inputを提供するものの参照がないと思っていました。

多くのAngularドキュメントにコメントしてあり、特定の動作が原因である可能性が高いため、1つのルートアプリケーションのみをブートストラップする必要があります。私はここであなたのオプションは、ブートストラップとあなたの他の（3）をインポートし、そのテンプレートとしてそれらを使用するルートアプリケーションを追加すると思います。その後、@Inputを通常どおりに渡します。本当に特別なものはありません。

あなたはあなたがそれらをブートストラップする必要があると判断し、外部データを必要とする場合、別のオプションで@Injectableからルートアプリケーションにデータを渡すことができると思います。しかし、私はそれが特定の目的にもっと言及されていると感じています。

編集：私はこのブログを見つけるのに時間がかかりました。私は過去の日を読みました。だから著者にはメリットがありますが、興味深いものです。 Providing external data when bootstrapping Angular 2