在Angular 2中创建一个动态组件

Question

嗨我是angular 2的新手，我在过去的一周中使用了angular 2，并想知道是否可以使用动态模板和动态样式生成动态组件。这意味着follwoing应该是这样的

@Component({ 
    // 2a 
    selector: 'dynamic placeholder', 

    // 2b 
    styles: [`dynamic styles`] 

    // 2c 
    template: `dynmic template` 
}) 

是有可能做到这一点在角2，我记得这是这样，也许可能在角1

任何帮助将不胜感激（Escpecially plunkers用简单的代码）

这是我迄今取得：尝试使用ComponentFactoryResolver：

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <div>Hello, world!</div> 
    ` 
}) 
export class AppComponent { 
} 

@NgModule({ 
    declarations: [HomeComponent], 
    exports: [HomeComponent] 
}) 
export class HomeModule { 
} 

@Component({ 
    selector: 'home', 
    template: ` 
     <div>This is home</div> 
    ` 
}) 
export class HomeComponent { 
} 

@Component({ 
    selector: 'hello-world', 
    template: ` 
     <div> 
      Hello, world!, {{name}} 
      The answer is: {{getAnswer()}} 
     </div> 
    ` 
}) 

export class HelloWorldComponent implements AfterViewInit { 
    private name:string = 'You'; 

    constructor(private helloWorldService: HelloWorldService) { 
    } 

    ngAfterViewInit(): void { 
     this.name = 'Me'; 
    } 

    private getAnswer() { 
     return this.helloWorldService.giveMeTheAnswer(); 
    } 
} 

@NgModule({ 
    declarations: [HomeComponent, HelloWorldComponent], 
    providers: [HelloWorldService], 
    exports: [HomeComponent] 
}) 
export class HomeModule { 
} 

@Component({ 
    selector: 'home', 
    template: ` 
     <button (click)="sayHello()">Say hello</button> 
     <div>This is home</div> 
    ` 
}) 

export class HomeComponent { 
    constructor(private componentFactoryResolver: ComponentFactoryResolver, 
       private viewContainerRef: ViewContainerRef) { 
    } 

    private sayHello() { 
     const factory = this.componentFactoryResolver.resolveComponentFactory(HelloWorldComponent); 
     const ref = this.viewContainerRef.createComponent(factory); 
     ref.changeDetectorRef.detectChanges(); 
    } 
} 

这里是一个plunker使创建动态组件，我不知道是否创建动态CSS是可能的，我会很高兴，如果一些我可以回答我的问题： http://plnkr.co/edit/ZXsIWykqKZi5r75VMtw2?p=preview

Answer 1

随着打字稿及最新版本Angular2的（我认为，功能已在2.4发布.0）可以创建1个基本组件，然后对其进行扩展。所有装饰/物业注释（@Input/@Output/@ViewChild）将被复制。但是，您必须为每个祖先@Component属性指定属性，即不能仅覆盖selector，而是覆盖所有内容。这是正确的做法。

另一种方法 - >使用reflect-metadata来更新组件类上的装饰器（可能是你正在寻找的，因为它可以在时间上覆盖1个属性），但要小心export（即公开）全部在您想要覆盖的组件内部使用的组件/指令/服务。例如，一些库有多个组件，其中一些只能在内部使用（即无法以正常方式将其导入到模块中;但是，您可以尝试providers）。如果您尝试“覆盖”，比如说，使用reflect-metadata的css，并且它使用内部组件 - > angular/typescript将崩溃，因为它无法解析“内部”内容。你可以从这个答案开始：StackOverflow