Angular 2.0 final:如何从代码实例化组件 [英] Angular 2.0 final: How to instantiate a component from code

问题描述

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

I'm looking for a way to instantiate a component in Angular2 from within the code of another component. Unlike the many people that have asked a similar question I'm not so much interested in dynamically compiling a new component, just instantiating and inserting one that already exists in my application.

例如:

说我有两个组成部分:

dashboard-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的方法.

What I'm looking for is a way to create a DashboardItemComponent in the onInit of the DashboardComponent and add it to the #placeholder div.

需要注意的两件事:

• 我将需要能够使用子组件的输入/输出
• 我不是要像下面两个问题所描述的那样在动态地编译新组件:在Angular 2中等同于$ compile

这两个较早的问题提出了类似的问题，但是它们的答案要么很乏味，要么与Angular2的早期(测试版)有关，因此似乎不再起作用.

These two earlier issues ask a similar question, but their answers are either rather lackluster or pertain to earlier (beta) versions of Angular2 and no longer seem to work.

• 如何实例化和渲染Angular2组件?
• 是否可以手动实例化angular中的组件2

• How to instantiate and render Angular2 components?
• Is it possible to manually instantiate component in angular 2

推荐答案

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

Here's a working demo: https://plnkr.co/edit/pgkgYEwSwft3bLEW95Ta?p=preview

import {Component, NgModule, ViewChild, ElementRef, Input, Output, EventEmitter, ViewContainerRef, ComponentRef, ComponentFactoryResolver, ReflectiveInjector} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'any-comp',
  template: '<div (click)="clicked.emit($event)">here i am.. {{name}}</div>'
})
export class AnyComponent {

  @Input() name;
  @Output() clicked = new EventEmitter();

  constructor() {
    console.log('some1 created me.. ! :)');
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <template #placeHolder>
      </template>
    </div>
  `,
})
export class App {

  @ViewChild('placeHolder', {read: ViewContainerRef}) private _placeHolder: ElementRef;

  name:string;
  constructor(private _cmpFctryRslvr: ComponentFactoryResolver) {
    this.name = 'Angular2'
  }

  ngOnInit() {
    let cmp = this.createComponent(this._placeHolder, AnyComponent);

    // set inputs..
    cmp.instance.name = 'peter';

    // set outputs..
    cmp.instance.clicked.subscribe(event => console.log(`clicked: ${event}`));

    // all inputs/outputs set? add it to the DOM ..
    this._placeHolder.insert(cmp.hostView);
  }

  public createComponent (vCref: ViewContainerRef, type: any): ComponentRef {

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

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, AnyComponent ], // ! IMPORTANT
  entryComponents: [ AnyComponent ], // ! IMPORTANT --> would be lost due to Treeshaking..
  bootstrap: [ App ]
})
export class AppModule {}

这篇关于Angular 2.0 final:如何从代码实例化组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！