在像 mat-checkbox 这样的组件内进行角度插值

Question

所以我想要一个mat-checkbox标签内带有 HTML 字符串的组件。我尝试了以下方法：<mat-checkbox class="check">    {{ someHtml }}</mat-checkbox>但它将 HTML 字符串打印为字符串并且不渲染它。使用以下方法也不起作用：<mat-checkbox class="check" [innerHtml]="someHtml"></mat-checkbox>这只是替换了整个内容，包括在运行时生成的复选框。有什么办法可以将html注入到标签中吗？

Answer 1

您可以使用Angular Directives

这里的想法是从 HTML 中获取元素，然后动态附加一些原始 HTML。

假设这个场景

应用程序组件.html

<mat-checkbox class="check" [appendHtml]="innerHtml"></mat-checkbox>

应用程序组件.ts

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  innerHtml = `<div style="border: 1px solid red;"> Text inside </div>`;

  constructor() {}

}

如您所见，我appendHtml向该mat-checkbox元素添加了一个属性。这是一个自定义指令，需要一个“原始”HTML 形式的字符串。

附加 html.directive.ts

@Directive({

  selector: '[appendHtml]'

})

export class AppendHtmlDirective implements AfterViewInit {

  @Input('appendHtml') html: string

  constructor(private element: ElementRef) {

  }

  ngAfterViewInit() {

    const d = this.element.nativeElement.querySelector('label');

    d.insertAdjacentHTML('beforeend', this.html);

  }

}

它AppendHtmlDirective需要一个html字符串类型的属性，并实现AfterViewInit接口（来自 Angular）以在元素渲染后获取该元素。通过注入，Angular 为我们提供了正在应用的元素；因此，在这种情况下，ElementRef构造函数中的 就是我们的MatCheckbox元素。

我们可以使用该insertAdjacentHTML函数将子元素附加到元素。我刚刚label从 中获取了元素MatCheckbox以放入其中。在每种情况下，您都应该了解在哪里附加 HTML。

我的意思是，label这里有效，bcMatCheckbox有一个与之匹配的标签。如果您想对其他元素重用此指令，则应该传递文字以在内部查找。

即：

append-hmtl.directive.ts

// ...

@Input() innerSelector: string

// ...

 ngAfterViewInit() {

    const d = this.element.nativeElement.querySelector(this.innerSelector);

    d.insertAdjacentHTML('beforeend', this.html);

 }

应用程序组件.hmtl

<mat-checkbox class="check" [appendHtml]="innerHtml" innerSelector="label"></mat-checkbox>

此外，您可以根据需要传递任意数量的输入来自定义指令的样式或行为。

Answer 2

您可以在 mat-checkbox 中放置一个跨度：

<mat-checkbox class="check">
    <span [appendHtml]="innerHtml"></span>
    </mat-checkbox>

Answer 3

我认为你应该将所有内容包装在 div 中并将其放在外面。

<div>

<mat-checkbox class="check"> </mat-checkbox>

{{ someHtml }}

</div>