英文:
Render Angular tags in injected HTML
问题
我有一个使用Angular 15的应用程序，其中有一个组件叫做FatherComponent，通过API接收到一个HTML字符串，然后使用innerHTML注入到其模板中：
<div [innerHTML]="htmlContent"></div>
我的问题是，接收到的HTML内容中还包含另一个组件SonComponent的一些Angular标签，但它们没有渲染出来：
htmlContent: string = 'Hi <app-son-component name="igorosabel"></app-son-component> !';
SonComponent并没有太复杂的操作，只是输出接收到的名字：
<strong>{{name}}</strong>
我该如何强制Angular重新渲染HTML以反映新接收到的内容呢？我查看并尝试了几种方法，包括FactoryResolver、Compiler等，但它们已经被弃用，我找不到更新的方法。
谢谢！
英文:
I have an Angular 15 application with a component, called FatherComponent, that receives via API a string of HTML that gets injected on its template using innerHTML:
<div [innerHTML]="htmlContent"></div>
My problem is that the received HTML content also has some Angular tags from another of my components, SonComponent, and they are not rendering.
htmlContent: string = 'Hi <app-son-component name="igorosabel"></app-son-component> !';
The SonComponent does nothing really fancy, just output that received name:
<strong>{{name}}</strong>
How can I force Angular to re-render the HTML to reflect the new received content? I have looked and tried several ways but FactoryResolver, Compiler... but they are already deprecated and I can't find an updated way of doing this.
Thanks!
答案1
得分: 2
你不能这样做，因为 innerHTML 不会寻找 Angular 自定义标签进行渲染。
也许你需要像下面的代码一样动态渲染组件：
export class DynamicContentComponent implements OnInit {
name: string;
constructor(public viewContainerRef: ViewContainerRef,
private componentFactoryResolver: ComponentFactoryResolver) { }
ngOnInit() {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ComponentClass);
this.viewContainerRef.clear();
const componentRef = this.viewContainerRef.createComponent(componentFactory);
(<DynamicComponentRef>componentRef.instance).name = this.name;
}
}
使用 ViewContainerRef.createComponent 的新方法：
import { ViewContainerRef } from '@angular/core';
/**
your code logic
*/
constructor(private viewContainerRef: ViewContainerRef)
public addTable(): void {
const component = this.viewContainerRef.createComponent(ComponentClass);
}
英文:
you can't do this because innerHTML doesn't look for angular custom tags to render.
Maybe you need to render component dynamically, like in the following code:
export class DynamicContentComponent implements OnInit {
name: string;
constructor(public viewContainerRef: ViewContainerRef,
private componentFactoryResolver: ComponentFactoryResolver) { }
ngOnInit() {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ComponentClass);
this.viewContainerRef.clear();
const componentRef = this.viewContainerRef.createComponent(componentFactory);
(<DynamicComponentRef>componentRef.instance).name = this.name;
}
}
New way with ViewContainerRef.createComponent
import {ViewContainerRef} from '@angular/core';
/**
your code logic
*/
constructor(private viewContainerRef: ViewContainerRef)
public addTable(): void {
const component = this.viewContainerRef.createComponent(ComponentClass);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论