Question

我正在寻找一种从另一个组件的代码中实例化Angular2中的组件的方法。与许多提出类似问题的人不同，我对动态编译新组件并不感兴趣，只是实例化并插入已存在于我的应用程序中的组件。

例如：

说我有两个组成部分：

仪表板item.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "dashboard-item",
    template: "Some dashboard item with functionality"
})
export class DashboardItemComponent {
    constructor() {}

    onInit() {}
}

dashboard.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "dashboard",
    template: "<h1>Dashboard!</h1><div #placeholder></div>"
})
export class DashboardComponent {
    constructor() {}

    onInit() {}
}

我正在寻找的是一种在DashboardComponent的onInit中创建DashboardItemComponent并将其添加到#placeholder div的方法。

有两点需要注意：

我需要能够使用子组件的输入/输出
我明确地没有谈论像这两个问题描述的那样动态编译新组件：How can I use/create dynamic template to compile dynamic Component with Angular 2.0?和Equivalent of $compile in Angular 2

这两个早期的问题提出了类似的问题，但他们的答案要么相当平淡，要么与早期（测试版）的Angular2相关，而且似乎不再起作用。

Answer 1

这是一个有效的演示：https://plnkr.co/edit/pgkgYEwSwft3bLEW95Ta?p=preview

autofocus="autofocus"

Answer 2

如果有人想避免在已接受答案中发表任何声明，则此处为摘录

    public createComponent<T>(vCref: ViewContainerRef, type: Type<T>): ComponentRef<T> {

    let factory = this._cmpFctryRslvr.resolveComponentFactory(type);

    // vCref is needed cause of that injector..
    let injector = ReflectiveInjector.fromResolvedProviders([], vCref.parentInjector);

    // create component without adding it directly to the DOM
    let comp = factory.create(injector);

    return comp;
  }

Answer 3

似乎有一个（新的？）API函数用于执行mxii的答案中描述的内容。 ViewContainerRef具有createComponent方法。它实例化组件并将其添加到视图中。

let factory = this._cmpFctryRslvr.resolveComponentFactory(AnyComponent);
let cmp = this.viewContainer.createComponent(factory);
cmp.instance.name = 'peter';

Answer 4

您可以将子组件放在父组件中。

<parent-component>
  <child-component></child-component>
</parent-component>

子组件公开一个EventEmitter属性，当事情发生时，它会使用该属性发出事件。父级绑定到该事件属性并对这些事件做出反应。 https://angular.io/docs/ts/latest/cookbook/component-communication.html

Angular 2.0 final：如何从代码

4 个答案: