動的なコンポーネントを角2で作成する

Question

ちょっと私は角度2を初めて使っています。私は先週、角度2で試して、動的なテンプレートと動的なスタイルで動的コンポーネントを生成できるかどうか疑問に思いました。これは、角2でそれを行うことが可能であるfollwoingは私が（例えば、これは任意のヘルプが理解されるであろう角度1.

に多分可能であることをEscpeciallyのplunkersを覚えて、この

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

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

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

のようにあるべきであることを意味します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あるシンプルコード）

とこれは私がこれまでに達成したものです（私は機能が2.4でリリースされていることを信じて活字体とAngular2の最新バージョンでは http://plnkr.co/edit/ZXsIWykqKZi5r75VMtw2?p=preview

Answer 1

：動的なCSSを作成することが可能である場合、私は知らない、いくつかは、私は私の質問に答えることができる場合は、動的コンポーネントは、私は嬉しくなります.0）1つの基本コンポーネントを作成し、それを拡張することができます。プロパティのすべてのデコレータ/注釈（@Input/@Output/@ViewChild）がコピーされます。ただし、祖先ごとに@Componentのプロパティを指定する必要があります。つまり、selectorだけを上書きすることはできません。それは正しいアプローチです。

もう1つのアプローチ - >コンポーネントクラスのデコレータを更新するにはreflect-metadataを使用します（この場合、1つのプロパティを上書きすることができます）。exportコンポーネントの中で使用されているコンポーネント/ディレクティブ/サービスを上書きします。たとえば、いくつかのライブラリには複数のコンポーネントがあり、その中には内部でのみ使用されるものがあります（通常の方法でモジュールにインポートする方法はありませんが、providersを試してみてください）。あなたが "上書き"しようとすると、reflect-metadataというCSSがあり、 "内部"のものを解決できないので、内部のコンポーネント - > angular/typescriptがクラッシュします。この回答で始めることができます：StackOverflow