Question

我正在根据以下示例开发动态模板创建。 example 但我无法获取html输出。即动态内容。 ts文件：

@Component({
  selector: 'product-item',
  template: `
    <div class="product">
      <ng-container *compile="template; context: this"></ng-container>
    </div>`,
})
export class DynamicItemComponent {

  @Input() content: string = `<a (click)='changeEditor('TEXT')'>Click me</a>`;  
  @Input() template: string = `{{content}}`;

}

HTML：

<product-item [content]="selectedTemplate.content"></product-item>

我如何获取html输出。我已经使用了safethtml管道，那也行不通。预先感谢。

Answer 1

您可以使用ng-template指令创建HTML模板。

<ng-template #anchorRef>
   <a (click)="changeEditor('TEXT')">Click me</a>
</ng-template>

您可以使用@Input装饰器将此templateRef作为输入传递给子组件。

子组件：

使用* ngTemplateOutlet结构指令

@Component({
  selector: 'hello',
  template: `
  <h1>Hello !</h1>
  <ng-container *ngTemplateOutlet="name"></ng-container>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: TemplateRef<any>;
}

在angular 6中使用模板时未显示html内容

1 个答案: