角2のコンポーネントの動的名

Question

どのように角度2のコンポーネントに動的な名前を設定できますか？

私は、テンプレート内の次のコードを持っている：

<{{component} [data]="data" [anotherData]="anotherData"></{{component}}> 

を私は今、私は次のエラーを持っているので、私のクラスで

component: string = 'component'; 

をコンポーネント名を定義しますたい：

Uncaught (in promise): Template parse errors: 
Unexpected closing tag "{{component}" (" 

Answer 1

<div [ngSwitch]="contactService.contact.cat"> 
     <div *ngSwitchWhen="'person'"> 
      <persons-edit [primary]="true"></persons-edit> 
     </div> 
     <div *ngSwitchWhen="'business'"> 
      <businesses-edit [primary]="true"></businesses-edit> 
     </div> 
     <div *ngSwitchWhen="'place'"> 
      <places-edit [primary]="true"></places-edit> 
     </div> 
    </div> 

これは私のアプリで使用しているものです。私は定義された3つのコンポーネントを持って、私が望むものを表示するためにスイッチを使います。私はここからサービスから選択を受け取りますが、ルートコンポーネントから取得できます。このような何か：

@Component { 
    selector: 'dynamic-component', 
    .... 
} 

export class DynamicComponent{ 
@Input selectedcomponent : string; 

} 

次にテンプレートでそれを使用します。

<dynamic-component [selectedcomponent]="person"></dynamic-component> 

、代わりにサービスを利用しての、 "selectedcomponent" に切り替えます。

Answer 2

あなたはコンポーネントに名前を動的に割り当てることはできません。 しかし、あなたの要素にidを動的に割り当てることができます[attr.id]="id_string_expression" ほとんどの場合、あなたの問題をそのように解決することができます。 のような何か：

<my-component [attr.id]="name+number" [data]="data" [anotherData]="anotherData"></my-component> 

Answer 3

回答は、単にあなたがすることはできませんです！

コンポーネントを定義するときに、そのコンポーネントの名前（セレクタプロパティ）とクラス名を宣言する必要があります。コンポーネント名を宣言することなく、コンポーネントを作成することはできません。

あなたのケースではオプションがあります。そのコンポーネントが必要なときにいつでも呼び出すか、必要に応じてそのコンポーネントの動的な入力値を作成して、動的な値を設定し、@Inputを取得します。なぜなら各コンポーネントにはdiffがあるからです。テンプレートやロジックも同様に、新しいコンポーネントを作成し、必要に応じて使用する方がよいでしょう。

はいID、名前、カスタム入力などのようなコンポーネントにデータを動的に設定できることは間違いありません。 ここにコメントしないとすべてがクリアされることを願っています！

Answer 4

可能です。それについてのrangle.ioのブログ記事をチェックしてくださいhttp://blog.rangle.io/dynamically-creating-components-with-angular-2/