要在InnerHTML中使用Angular指令,可以使用Angular的动态组件或者动态模板功能。下面是一种解决方法:
首先,创建一个Angular指令,例如MyDirective
:
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
constructor(private elementRef: ElementRef) {
this.elementRef.nativeElement.innerHTML = '{{ message }}';
}
get message(): string {
return 'Hello, World!';
}
}
然后,在你的组件模板中使用ng-template
和ngComponentOutlet
来动态渲染这个指令:
在组件类中引入MyDirective
:
import { Component } from '@angular/core';
import { MyDirective } from './my.directive';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
dynamicContent: string = '';
constructor(private myDirective: MyDirective) {
this.dynamicContent = myDirective.elementRef.nativeElement.innerHTML;
}
}
这样,MyDirective
中的指令代码就会被渲染到innerHTML
中,并且可以使用Angular的数据绑定语法。