使用角度@input在另一個組件中加載組件

我有一個在應用程序中隨處可見的標頭組件。我希望能夠傳遞它另一個組件，以便它可以呈現它。我希望它是簡單的，如：

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

這myComponent的可以屬於該模塊的頭部已經被加載大量的開發人員使用不同的方法（其中一些在角4.4新版本棄用。 0.3）。我試圖以最簡單和乾淨的方式來做到這一點。由於我的模塊被加載懶惰我不能把它們放在根模塊中作爲'entryComponents'，那就是它對我來說越來越困難。

我試過NgComponentOutlet（https://angular.io/api/common/NgComponentOutlet），但它不適合我。

我也嘗試過動態組件加載（DML）（https://angular.io/guide/dynamic-component-loader），那些都不起作用。它需要我在根模塊的'entryComponents'中添加動態組件。

請幫忙嗎？

來源

2017-09-23 Hassan

你'myCompanent'有一個像一個選擇：'APP-MY-component' –

如果有人正在尋找該解決方案，我用它如下：

@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; 
}

的關鍵是要聲明MyCustomHeaderComponent在所述模塊的其部分的 'entryComponents'。

更新： 也找到了很好的封裝處理與@input和@Output動態組件：https://www.npmjs.com/package/ng-dynamic-component

來源

2017-09-23 13:54:26 Hassan

你應該在app-header模板中使用你的myComponent的選擇...

讓我們考慮一下，你有它的模板HeaderComponent你應該包括你app-my-component，如：模板：<app-my-component></app-my-component>

來源

2017-09-23 11:41:25

也許我的問題不夠清楚。 MyComponent實際上是動態的，並且在每個模塊中都會有所不同。我找到了一種方法，但組件必須放入模塊中的「entryComponents」中。 – Hassan

對你有好處！ –

使用角度@input在另一個組件中加載組件

回答

相關問題