0

以下の例に従います。

動的テンプレートを使用/作成して動的コンポーネントを Angular 2.0 でコンパイルするにはどうすればよいですか?

変数から直接 HTML コンテンツを取得する独自のテンプレート ジェネレーターを開発しました。ここにあります: http://plnkr.co/edit/2Sv1vp?p=preview

さて、私の質問は...テンプレートのコンテンツがコンポーネントと対話する必要がある場合、たとえばクリック時に実行する関数と対話する必要がある場合...どうすればそれを行うことができますか?

ここに私の app.component.ts

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");
    }
}

「Sono il secondo template」をクリックしようとすると、printSomething()関数が実行されるはずですが、代わりに次のエラーが発生します。

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

1 に答える 1

0

問題は、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() 属性でそのメソッドへの参照を渡す必要があります。

于 2016-12-14T19:00:38.427 に答える