Question

这是一个Angular 4.x问题。

我有一个标题组件，可在应用程序的任何位置使用。我希望能够传递另一个组件，以便它可以渲染它。我希望它很简单：

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

此 myComponent 可以属于正在加载标头的模块。许多开发人员使用了不同的方法（其中一些方法在较新版本的angular 4.4.3中被弃用）。我试图用最简单，最干净的方式来做。由于我的模块是 lazily ，所以我不能将它们作为'entryComponents'放在根模块中，这对我来说很难。

我尝试过NgComponentOutlet（https://angular.io/api/common/NgComponentOutlet），但它不适用于我。

我也尝试了动态组件加载（DML）（https://angular.io/guide/dynamic-component-loader），但这也没有用。它要求我在根模块的“entryComponents”中添加动态组件。

请帮忙吗？

Answer 1

您应该在phill phone phdas的模板中使用myComponent的选择器...

我们认为您的模板中有app-header您应该包含HeaderComponent之类的：模板：app-my-component

Answer 2

如果有人正在寻找解决方案，我会按如下方式使用它：

@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

使用角度

2 个答案: