Question

我正在使用一条指令将HTML动态注入其他HTML元素，尤其是无法修改代码的其他组件。我的问题是，如果我注入HTML元素，但它们在同一组件中调用本地函数，则它们将无法工作。一个例子：

<button class="button-default" (click)="showTable()">Show table info</button>

在这种情况下，如果您按下按钮，则什么也不发生，不会调用该函数。

指令代码：

import { Directive, ElementRef,AfterViewInit, Input} from '@angular/core';


@Directive({
    selector: '[insertHtml]'
})

export class InsertHtml {

    @Input()   targetHtml : string;
    @Input()   html : string;
    @Input()   position: any;

    private el: HTMLInputElement;
    constructor(private elementRef: ElementRef) { 
        this.el = this.elementRef.nativeElement;  

    }



  ngAfterViewInit() {

        let target = this.el.querySelector(this.targetHtml );
        target.insertAdjacentHTML(this.position, this.html);

    }
}

该指令的工作方式：

<div class="block" [insertHtml]="'ul.nav.nav-tabs'" [html]="htmlButtons" [position]="'afterend'">

htmlButton将是我在示例案例中输入的代码。

我如何使注入的HTML元素内部的功能正常工作？

动态注入HTML的Angular 6指令

0 个答案: