Angular2，从组件内的字符串计算模板 [英] Angular2, evaluate template from string inside a component

问题描述

可以从变量中的字符串中评估模板吗？我需要将字符串放在组件中而不是表达式中，
例如

It's possible evaluate template from string in a variable?. I need place the string in the component instead of the expression, e.g.

template：< div> {{template_string}}< / div>

template_string 包含：< b> {{name}}< / b>

所有应评估为< div>< b>我的名字< / b>< / div>

但我看到< div> {{template_string}}< / div>

我需要像 {{template_string | eval}} 或其他东西来评估当前上下文中变量的内容。

I need something like {{ template_string | eval }} or something else to evaluate the content of the variable on current context.

这可能吗？我需要使用这种方法，因为在使用组件时可以更改 template_string 。

It's possible? I need something to use this approach because template_string can be changed when the component is used.

Edit1：

Angular Version： 4.0.3

Angular Version: 4.0.3

例如

@Component({
  selector: 'product-item',
  template: `
    <div class="product">{{ template }}</div>`,
})
export class ProductItemComponent {
  @Input() name: string;
  @Input() price: number = 0;
  @Input() template: string = `{{ name }} <b>{{ price | currency }}</b>`;
}

用法：

<product-item [name]="product.name" [price]="product.price"></product-item>

预期：产品名称 USD3.00

输出 {{name}}< b> {{price |货币}}< / b>

推荐答案

您可以创建自己的指令来执行此操作：

You can create your own directive that will do it:

compile.directive.ts

@Directive({
  selector: '[compile]'
})
export class CompileDirective implements OnChanges {
  @Input() compile: string;
  @Input() compileContext: any;

  compRef: ComponentRef<any>;

  constructor(private vcRef: ViewContainerRef, private compiler: Compiler) {}

  ngOnChanges() {
    if(!this.compile) {
      if(this.compRef) {
        this.updateProperties();
        return;
      }
      throw Error('You forgot to provide template');
    }

    this.vcRef.clear();
    this.compRef = null;

    const component = this.createDynamicComponent(this.compile);
    const module = this.createDynamicModule(component);
    this.compiler.compileModuleAndAllComponentsAsync(module)
      .then((moduleWithFactories: ModuleWithComponentFactories<any>) => {
        let compFactory = moduleWithFactories.componentFactories.find(x => x.componentType === component);

        this.compRef = this.vcRef.createComponent(compFactory);
        this.updateProperties();
      })
      .catch(error => {
        console.log(error);
      });
  }

  updateProperties() {
    for(var prop in this.compileContext) {
      this.compRef.instance[prop] = this.compileContext[prop];
    }
  }

  private createDynamicComponent (template:string) {
    @Component({
      selector: 'custom-dynamic-component',
      template: template,
    })
    class CustomDynamicComponent {}
    return CustomDynamicComponent;
  }

  private createDynamicModule (component: Type<any>) {
    @NgModule({
      // You might need other modules, providers, etc...
      // Note that whatever components you want to be able
      // to render dynamically must be known to this module
      imports: [CommonModule],
      declarations: [component]
    })
    class DynamicModule {}
    return DynamicModule;
  }
}

用法：

@Component({
  selector: 'product-item',
  template: `
    <div class="product">
      <ng-container *compile="template; context: this"></ng-container>
    </div>
  `,
})
export class ProductItemComponent {
  @Input() name: string;
  @Input() price: number = 0;
  @Input() template: string = `{{ name }} <b>{{ price | currency }}</b>`;
}

Plunker示例

Plunker Example

参见

• Angular 2.1.0动态创建子组件，动态

• Angular 2.1.0 create child component on the fly, dynamically

这篇关于Angular2，从组件内的字符串计算模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！