2017-09-23 29 views
0

これはAngular 4.xの質問です。角度で@inputを使用して別のコンポーネント内のコンポーネントをロードする

私は、アプリケーションのどこでも使用されるヘッダーコンポーネントを持っています。私はそれをレンダリングできるように別のコンポーネントを渡すことができるようにしたい。私はそれはのような単純なものにしたい:

<app-header 
    [Component] = "myComponent" 
></app-header> 

このmyComponentというはヘッダーがにロードされているモジュールに属することができ、開発者の 多くは、異なる方法を使用している(そのうちのいくつかは、角4.4の新しいバージョンでは非推奨します。 3)。私はそれをできるだけ簡単できれいな方法でやろうとしています。私のモジュールはロードされているので、遅れて私はrootモジュールに 'entryComponents'とそれらを入れ替えることができません。

私はNgComponentOutlet(https://angular.io/api/common/NgComponentOutlet)を試しましたが、それは私のために働いていません。

また、Dynamic Component Loading(DML)(https://angular.io/guide/dynamic-component-loader)も試してみましたが、どちらも動作しません。私は、ルートモジュールの 'entryComponents'に動的コンポーネントを追加する必要があります。

お願いします。誰が見ている場合<app-my-component></app-my-component>

+0

あなた 'myCompanent'のようなセレクタがあります:'アプリ - 私の-component' –

答えて

0

:テンプレート:

0

あなたはapp-headerのテンプレートであなたのmyComponentのセレクタを使用する必要があります...

はのは、あなたがあなたのapp-my-componentなどが含まれている必要があり、そのテンプレートにHeaderComponentを持っていることを考えてみましょう

@Component({ 
    selector  : 'app-header', 
    templateUrl : `<ng-container *ngComponentOutlet="dynamicComponent"></ng-container>`, 
}) 
export class HeaderDesktopComponent implements OnInit, OnChanges { 
    @Input() component: any  = null; 

    dynamicComponent = null; 

    ngOnInit() { 
     if (component) { 
      this.dynamicComponent = this.component; 
     } 
    } 
} 

をその後、他のモジュールのテンプレートで:

を以下のように解決するために、私はその使用しました
<app-header [component]="myComponent"></app-header> 

、コードで:

ngOnInit() { 
    this.myComponent = MyCustomHeaderComponent; 
} 

キーは、モジュールのその部分の 'entryComponents' にMyCustomHeaderComponentを宣言することです。

更新: は@Inputと@outputで動的コンポーネントを処理するための良いパッケージをも見つけました:https://www.npmjs.com/package/ng-dynamic-component

+0

を多分私の質問は、十分に明確ではなかった。 MyComponentは実際には動的で、各モジュールで異なるでしょう。私は方法を見つけましたが、コンポーネントはモジュールの 'entryComponents'に入れなければなりません。 – Hassan

+0

あなたのために良い! –

関連する問題