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

Question

现在有个需求,富文本生成的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？求大神谢谢了，在线等。。。

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>

Answer 1

折中方案：在生成的标签上包裹一层，在包裹的那一层加上指令标签，点击后触发指令获取到点击到的元素，拿到url创建动态组件，实现放大。可能innerHtml插入的标签，ng不会识别任何指令吧。

思考：创建动态组件后，会调用applicationRef.bootstrap来初始化组件，并触发变换检测。(初始化后ng就能识别组件中的指令)，是不是可以把动态html扔到一个组件中，然后初始化这个组件，是否能识别动态html中的指令呢。

Answer 2

我认为这是因为框架中的指令，再怎么设定语法怎样，最终在浏览器中展示出来始终还是用的html，所以用innerHtml插入的标签中的自定义指令不会在打包运行的时候被编译，自然不会生效。