Laden Komponente in einer anderen Komponente mit @ Eingang in Winkel

Question

Dies ist eine Angular 4.x Frage.

Ich habe eine Header-Komponente, die überall in der App verwendet wird. Ich möchte in der Lage sein, eine andere Komponente zu übergeben, damit sie es rendern kann. Ich möchte es einfach sein wie:

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

Diese myComponent dem Modul gehören kann der Header in geladen wird Viele Entwickler haben verschiedene Methoden verwendet (einige von ihnen in neueren Version von Winkel 4.4 veraltet. .3). Ich versuche es auf die einfachste und sauberste Art und Weise zu tun. Da meine Module geladen sind träge ich kann sie nicht in das Stammmodul als "entryComponents" setzen und das ist, wo es hart für mich wird.

Ich habe versucht, NgComponentOutlet (https://angular.io/api/common/NgComponentOutlet), aber es funktioniert nicht für mich.

Ich habe auch versucht, die dynamische Komponente Loading (DML) (https://angular.io/guide/dynamic-component-loader) und das funktioniert auch nicht. Dazu muss ich die dynamische Komponente in den 'entryComponents' des Stammmoduls hinzufügen.

Irgendwelche Hilfe bitte?

Answer 1

Wenn jemand sucht i für die Lösung verwendet, um seine wie folgt:

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

Dann in der Vorlage andere Modul:

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

Und in Code:

ngOnInit() { 
    this.myComponent = MyCustomHeaderComponent; 
} 

Der Schlüssel ist MyCustomHeaderComponent in dem 'entryComponents' des Moduls der seinerseits zu erklären. zu handhaben gefunden haben auch ein gutes Paket dynamische Komponenten mit @Input und @Output:

aktualisieren https://www.npmjs.com/package/ng-dynamic-component

Answer 2

Sie sollten Ihre myComponent ‚s Wähler in Vorlage von app-header ...

wir verwenden beachten Sie, dass Sie haben HeaderComponent in seiner Vorlage sollte Sie Ihr gehören app-my-component wie: template: <app-my-component></app-my-component>