Angular 2:在动态模板(动态组件)内单击的函数/方法

问题描述

按照下面的例子:

我该怎么做使用/创建动态模板以使用 Angular 2.0 编译动态组件?

我开发了自己的模板生成器，它直接从变量中获取 HTML 内容.这里是:http://plnkr.co/edit/2Sv1vp?p=preview

I developed my own template generator, which gets the HTML content directly from a variable.Here it is:http://plnkr.co/edit/2Sv1vp?p=preview

现在，我的问题是...如果模板内容必须与组件交互，例如与一个在点击时执行的函数...我该怎么做?

Now, my question is... if template content has to interact with the component, for example with a function to execute on click... how can I do that?

这里是我的 app.component.ts

Here my 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() 函数，但我收到此错误:

When I try click on "Sono il secondo template", it should execute printSomething() function, but instead I obtain this error:

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

推荐答案

问题正如 Angular 所说；动态创建的组件中不存在 printSomething.如果我们在动态创建的组件中声明一个函数，我们就可以调用它:

The problem is as Angular says; printSomething does not exist in your dynamically created component. If we declare a function within the dynamically created component, we are able to call it:

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() 属性中传递一个对它的引用.

If you want to call a method in app.component.ts, you'll need to pass a reference to it in a new @Input() attribute of CustomDynamicComponent.

这篇关于Angular 2:在动态模板(动态组件)内单击的函数/方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！