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

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