所以我想要一個mat-checkbox標簽內帶有 HTML 字符串的組件。我嘗試了以下方法：<mat-checkbox class="check"> {{ someHtml }}</mat-checkbox>但它將 HTML 字符串打印為字符串并且不渲染它。使用以下方法也不起作用：<mat-checkbox class="check" [innerHtml]="someHtml"></mat-checkbox>這只是替換了整個內容，包括在運行時生成的復選框。有什么辦法可以將html注入到標簽中嗎？
3 回答
陪伴而非守候
TA貢獻1757條經驗 獲得超8個贊
您可以使用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>
此外，您可以根據需要傳遞任意數量的輸入來自定義指令的樣式或行為。
一只名叫tom的貓
TA貢獻1906條經驗 獲得超3個贊
您可以在 mat-checkbox 中放置一個跨度：
<mat-checkbox class="check"> <span [appendHtml]="innerHtml"></span> </mat-checkbox>
守候你守候我
TA貢獻1802條經驗 獲得超10個贊
我認為你應該將所有內容包裝在 div 中并將其放在外面。
<div>
<mat-checkbox class="check"> </mat-checkbox>
{{ someHtml }}
</div>
- 3 回答
- 0 關注
- 202 瀏覽
添加回答
舉報
0/150
提交
取消