Angular2（點擊）動態加載組件視圖

Question

我已經創建了點擊來動態加載組件視圖，但每次單擊都是單獨的。我想有函數，我通過函數傳遞一個字符串，而不是輸入該函數中的字符串來加載視圖。

這裏是一個工作plunker http://plnkr.co/edit/ZXsIWykqKZi5r75VMtw2?p=preview

組件

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Lets dynamically create some components!</h2> 
     <button (click)="createHelloWorldComponent()">Create Hello World</button> 
     <button (click)="createWorldHelloComponent()">Create World Hello</button> 
     <dynamic-component [componentData]="componentData"></dynamic-component> 
    </div> 
    `, 
}) 

export class App { 
    componentData = null; 

    createHelloWorldComponent(){ 

    this.componentData = { 
     component: HelloWorldComponent, 
     inputs: { 
     showNum: 9 
     } 
    }; 
    } 

    createWorldHelloComponent(){ 
    this.componentData = { 
     component: WorldHelloComponent, 
     inputs: { 
     showNum: 2 
     } 
    }; 
    } 
} 

想什麼已經是一個函數，從數組定義在（點擊）傳遞一個變量，加載視圖。 這裏是一個試圖plunker：http://plnkr.co/edit/HRKGhCCEfkOhNjXbr6C5?p=preview

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Lets dynamically create some components!</h2> 

      <li *ngFor="let item of myMenu"> 

       <button (click)="loadView({{ item.viewname }})">{{ item.id }}</button> 
     </li> 

     <dynamic-component [componentData]="componentData"></dynamic-component> 
    </div> 
    `, 
}) 
export class App { 
    componentData = null; 
    myMenu = {}; 
     constructor() { 
     this.myMenu = myMenu; 

     } 

    loadView(viewName){ 

    this.componentData = { 
     component: viewName, 
     inputs: { 
     showNum: 9 
     } 
    }; 
    } 


} 

const myMenu = [ 
    { 
    id: 1, 
    viewname: 'HelloWorldComponent' 
    }, 
    { 
    id: 2, 
    viewname: 'WorldHelloComponent' 

    }, 


]; 

Answer 1

使用下面的代碼，

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Lets dynamically create some components!</h2> 
     <button (click)="createComponent($event)">Create Hello World</button> 
     <button (click)="createComponent($event)">Create World Hello</button> 
     <dynamic-component [componentData]="componentData"></dynamic-component> 
    </div> 
    `, 
}) 

和組件方法有以下代碼

createComponent(val){ 
    if(val.srcElement.innerHTML==='Create Hello World') 
    { 
     this.createHelloWorldComponent() 
    } 
    if(val.srcElement.innerHTML==='Create World Hello'){ 
     this.createWorldHelloComponent() 
    } 
    } 

LIVE DEMO更新您的plunker。

更新1：當您還沒有準備好在if條件下處理它們時，您應該有一個映射屬性以基於點擊的項目返回componentData。

var myComponents =[{ 
     id : 1, 
     component: HelloWorldComponent, 
     inputs: { showNum: 9 } 
    },{ 
     id : 2, 
     component: WorldHelloComponent, 
     inputs: { showNum: 0 } 
    }]; 
var myMenu = [{ 
    id: 1, 
    viewname: 'HelloWorldComponent', 
    componentID : 1 
    }, 
    { 
    id: 2, 
    viewname: 'WorldHelloComponent', 
    componentID : 2 
    }]; 

LIVE DEMO