現(xiàn)在有個(gè)需求,富文本生成的img標(biāo)簽需要在詳情中能點(diǎn)擊放大的效果。
我的想法是寫(xiě)一個(gè)點(diǎn)擊放大的組件，然后在富文本生成img標(biāo)簽的時(shí)候插入selector標(biāo)識(shí)，調(diào)用放大組件。

問(wèn)題：

在詳情中獲取到生成好的img標(biāo)簽通過(guò)[innerHtml]插入到頁(yè)面中。

-通過(guò)[innerHtml]插入的標(biāo)簽angular會(huì)自動(dòng)刪除所有attribute防止xss攻擊，通過(guò)DomSanitizer解決了。雖然頁(yè)面展示了<img appNgzLightbox src="https://unsplash.it/600.jpg?image=251">標(biāo)簽。但是appNgzLightbox這個(gè)directive沒(méi)被觸發(fā)。直接在頁(yè)面中加入這個(gè)標(biāo)簽是沒(méi)有問(wèn)題的

為什么appNgzLightbox這個(gè)組件不能被觸發(fā)，angular為什么無(wú)法識(shí)別標(biāo)簽中appNgzLightbox呢？是因?yàn)橥ㄟ^(guò)innerhtml后沒(méi)有觸發(fā)檢測(cè)，angular沒(méi)法識(shí)別這個(gè)selector？求大神謝謝了，在線(xiàn)等。。。

ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
  selector: 'ngz-lightbox',
  templateUrl: './ngz-lightbox.component.html',
  styleUrls: ['./ngz-lightbox.component.scss']
})
export class NgzLightboxComponent implements OnInit, AfterViewInit {
  url: any;
  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    this.url = this.sanitizer.bypassSecurityTrustHtml(
      '<img  appNgzLightbox src="https://unsplash.it/600.jpg?image=251">'
    );
  }

  ngAfterViewInit() {}
}

html

<span [innerHtml]='url'></span>