在像 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({&nbsp; selector: 'app-root',&nbsp; templateUrl: './app.component.html',&nbsp; styleUrls: ['./app.component.scss']})export class AppComponent {&nbsp; innerHtml = `<div style="border: 1px solid red;"> Text inside </div>`;&nbsp; constructor() {}}如您所见，我appendHtml向该mat-checkbox元素添加了一个属性。这是一个自定义指令，需要一个“原始”HTML 形式的字符串。附加 html.directive.ts@Directive({&nbsp; selector: '[appendHtml]'})export class AppendHtmlDirective implements AfterViewInit {&nbsp; @Input('appendHtml') html: string&nbsp; constructor(private element: ElementRef) {&nbsp; }&nbsp; ngAfterViewInit() {&nbsp; &nbsp; const d = this.element.nativeElement.querySelector('label');&nbsp; &nbsp; d.insertAdjacentHTML('beforeend', this.html);&nbsp; }}它AppendHtmlDirective需要一个html字符串类型的属性，并实现AfterViewInit接口（来自 Angular）以在元素渲染后获取该元素。通过注入，Angular 为我们提供了正在应用的元素；因此，在这种情况下，ElementRef构造函数中的 就是我们的MatCheckbox元素。我们可以使用该insertAdjacentHTML函数将子元素附加到元素。我刚刚label从 中获取了元素MatCheckbox以放入其中。在每种情况下，您都应该了解在哪里附加 HTML。我的意思是，label这里有效，bcMatCheckbox有一个与之匹配的标签。如果您想对其他元素重用此指令，则应该传递文字以在内部查找。即：append-hmtl.directive.ts// ...@Input() innerSelector: string// ...&nbsp;ngAfterViewInit() {&nbsp; &nbsp; const d = this.element.nativeElement.querySelector(this.innerSelector);&nbsp; &nbsp; d.insertAdjacentHTML('beforeend', this.html);&nbsp;}应用程序组件.hmtl<mat-checkbox class="check" [appendHtml]="innerHtml" innerSelector="label"></mat-checkbox>此外，您可以根据需要传递任意数量的输入来自定义指令的样式或行为。

Answer 2

您可以在 mat-checkbox 中放置一个跨度：<mat-checkbox&nbsp;class="check"> &nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;[appendHtml]="innerHtml"></span> &nbsp;&nbsp;&nbsp;&nbsp;</mat-checkbox>

Answer 3

我认为你应该将所有内容包装在 div 中并将其放在外面。<div><mat-checkbox class="check"> </mat-checkbox>{{ someHtml }}</div>