在Angular 2中創建一個動態組件

-1

嗨我是angular 2的新手，我在過去的一週中使用了angular 2，並想知道是否可以使用動態模板和動態樣式生成動態組件。這意味着follwoing應該是這樣的在Angular 2中創建一個動態組件

@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

來源

2017-02-17 Brk

StackOverflow不是讓你讓人爲你寫代碼的地方。向我們展示您的嘗試並做出堅實的努力 –

好的我會以正確的方式上傳它，代碼甚至不會工作 – Brk

而不是試圖關閉此線程，爲什麼不能互相幫助。我正在努力試圖瞭解這個主題是否可能在角度2中。如果不是，我不會遷移到角度2或使用它。我在互聯網上傳遞了我的例子，對於我的案例沒有確切的答案。 – Brk

隨着打字稿及最新版本Angular2的（我認爲，功能已在2.4發佈.0）可以創建1個基本組件，然後對其進行擴展。所有裝飾/物業註釋（@Input/@Output/@ViewChild）將被複制。但是，您必須爲每個祖先@Component屬性指定屬性，即不能僅覆蓋selector，而是覆蓋所有內容。這是正確的做法。

另一種方法 - >使用reflect-metadata來更新組件類上的裝飾器（可能是你正在尋找的，因爲它可以在時間上覆蓋1個屬性），但要小心export（即公開）全部在您想要覆蓋的組件內部使用的組件/指令/服務。例如，一些庫有多個組件，其中一些只能在內部使用（即無法以正常方式將其導入到模塊中;但是，您可以嘗試providers）。如果您嘗試「覆蓋」，比如說，使用reflect-metadata的css，並且它使用內部組件 - > angular/typescript將崩潰，因爲它無法解析「內部」內容。你可以從這個答案開始：StackOverflow

來源

2017-02-17 20:53:45

謝謝蒂姆爲快速回答，但是看起來在我看來附加答案，反映metdata是爲繼承而不是創建動態組件。 – Brk

我給你解釋的權利，但我正在尋找清楚如何使用反射元數據這樣的工具的例子 – Brk

好吧，可能我誤解了你的問題。我以爲你想分享組件之間的通用功能，而不是實時編碼）。 –

在Angular 2中創建一個動態組件

回答

相關問題