angular中需要通过插入带有directive的img标签,在html中innerhtml这段标签后directive不触发_JavaScript_论坛

angular中需要通过插入带有directive的img标签,在html中innerhtml这段标签后directive不触发

风***灬分类：JavaScript 人气：1026 回帖：2 发布于6年前收藏

现在有个需求,富文本生成的img标签需要在详情中能点击放大的效果。
我的想法是写一个点击放大的组件，然后在富文本生成img标签的时候插入selector标识，调用放大组件。

问题：

在详情中获取到生成好的img标签通过[innerHtml]插入到页面中。

-通过[innerHtml]插入的标签angular会自动删除所有attribute防止xss攻击，通过DomSanitizer解决了。虽然页面展示了<img appNgzLightbox src="https://unsplash.it/600.jpg?image=251">标签。但是appNgzLightbox这个directive没被触发。直接在页面中加入这个标签是没有问题的

为什么appNgzLightbox这个组件不能被触发，angular为什么无法识别标签中appNgzLightbox呢？是因为通过innerhtml后没有触发检测，angular没法识别这个selector？求大神谢谢了，在线等。。。

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