2角度：動的なテンプレート（ダイナミックコンポーネント）の内部をクリック上の関数/メソッド

Question

以下の例を次に示します。

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

私は変数から直接HTMLコンテンツを取得し、私自身のテンプレートジェネレータを開発しました。 はここにある：テンプレートコンテンツは、クリックで実行する機能を持つ例えば、コンポーネントと対話しなければならない場合 http://plnkr.co/edit/2Sv1vp?p=preview

さて、私の質問は、私はそれをどのように行うことができます... ...ているのですか？ここで

私app.component.ts私は "園ILセコンドテンプレート" をクリックしようとすると

import { Component }   from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>An app with DYNAMIC content</h2> 
     <hr /> 
     <dynamic-detail [tmpl]="tmpl1" [entity]="entity"></dynamic-detail> 
     <dynamic-detail [tmpl]="tmpl2" [entity]="entity"></dynamic-detail> 
    </div>`, 
    }) 
    export class AppComponent { 
    private tmpl: string; 
    private entity: any; 

    constructor() { 
     this.entity = { 
     code: "ABC123", 
     description: "A description of this Entity", 
     nome: "Bea" 
     }; 

     this.tmpl1 = '<h2>Sono {{entity.nome}}, il primo template</h2>'; 
     this.tmpl2 = '<a (click)="printSomething()">Sono il secondo template</a>'; 
     } 

    printSomething() { 
     console.log("Hello World"); 
    } 
} 

、それはprintSomething()機能を実行しなければならないが、代わりに、私はこのエラーを取得：

Error in ./CustomDynamicComponent class CustomDynamicComponent - inline template:0:0 caused by: self.context.printSomething is not a function 

Answer 1

問題はAngularが言っている通りです。ダイナミックに作成されたコンポーネントにprintSomethingが存在しません。我々は、動的に作成したコンポーネント内の関数を宣言すると、我々はそれを呼び出すことができます：

app.component.ts

this.tmpl2 = '<a (click)="linkClicked()">Sono il secondo template</a>'; 

type.builder.ts

protected createNewComponent(tmpl: string) { 
    @Component({ 
     selector: 'dynamic-component', 
     template: tmpl, 
    }) 
    class CustomDynamicComponent implements IHaveDynamicData { 
     @Input() public entity: any; 

     linkClicked() { 
     console.log('yay!'); 
     } 

    }; 
    // a component for this particular template 
    return CustomDynamicComponent; 
    } 

app.component.ts内のメソッドを呼び出す場合は、CustomDynamicComponentの新しい@Input（）属性でそのメソッドへの参照を渡す必要があります。