问题描述
当您使用另一个元素的ElementRef.nativeElement.innerHTML属性将带有指令的元素添加到DOM时，该指令不会触发.如何以一种导致指令触发的方式向DOM中添加元素?
When you add an element with a directive to the DOM using another element's ElementRef.nativeElement.innerHTML property, the directive does not fire. How do I add an element to the DOM in a way that causes the directive to fire?
示例
如果在我的组件中执行以下操作:
Example
If in my component I do something like the following:
export class AppComponent implements OnInit {
constructor(private _elem: ElementRef) { }
ngOnInit() {
this._elem.nativeElement.innerHTML = '<span myDirective>Foo</span>';
}
}
(这是对我实际实现的主要简化，因此我们暂时忽略这是一种不好的做法)
(This is a major simplification over my actual implementation, so let's ignore that this is bad practice for a second)
然后，似乎已附加到<span>的myDirective永远不会真正运行.
Then the myDirective that appears to be attached to the <span> will never actually run.
问题是:我如何利用指令识别新元素以便其运行?
The question is: how do I get angular to recognize the new element with the directive so that it runs?
推荐答案
即时编译已从Angular 2+中删除.另一种使用动态组件加载器动态加载组件的方法.为此，您必须更改现有的实施方式
On the fly compilation is removed from Angular 2+. Another Alternative loading components dynamically using Dynamic Component Loader. For this you have to change your existing implementation
https://angular.io/guide/dynamic-component-loader
这篇关于将指令附加到动态添加的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！