第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在像 mat-checkbox 這樣的組件內進行角度插值

在像 mat-checkbox 這樣的組件內進行角度插值

撒科打諢 2023-11-13 10:47:46
所以我想要一個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 中獲取元素,然后動態(tài)附加一些原始 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字符串類型的屬性,并實現(xiàn)AfterViewInit接口(來自 Angular)以在元素渲染后獲取該元素。通過注入,Angular 為我們提供了正在應用的元素;因此,在這種情況下,ElementRef構造函數(shù)中的 就是我們的MatCheckbox元素。

我們可以使用該insertAdjacentHTML函數(shù)將子元素附加到元素。我剛剛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>

此外,您可以根據(jù)需要傳遞任意數(shù)量的輸入來自定義指令的樣式或行為。


查看完整回答
反對 回復 2023-11-13
?
一只名叫tom的貓

TA貢獻1906條經驗 獲得超3個贊

您可以在 mat-checkbox 中放置一個跨度:

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


查看完整回答
反對 回復 2023-11-13
?
守候你守候我

TA貢獻1802條經驗 獲得超10個贊

我認為你應該將所有內容包裝在 div 中并將其放在外面。


<div>

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

{{ someHtml }}

</div>


查看完整回答
反對 回復 2023-11-13
  • 3 回答
  • 0 關注
  • 219 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號