Question

我的应用程序将从包含嵌入的外部api接收html，我想在渲染周围的html时将其转换为组件。 Angular版本4.2.6。

@Component({
selector: 'content-body',
styleUrls: [ './content-body.component.scss' ],
template: `<div [innerHTML]="content"></div>`
})
export class ContentBodyComponent implements OnInit, AfterViewInit {

    @Input()
    content: string = '<p>Example string</p><p>Should render with [some-embed-to-translate data="passable-data" ]';

    constructor(private viewContainerRef: ViewContainerRef,
            private componentFactoryResolver: ComponentFactoryResolver){}

    ngOnInit() {
        // Methods for converting embeds into ng-content containers/reference points that
        // can be referenced and transformed into components after init
    }

    ngAfterViewInit() {
        this.loadEmbeds();
    }

    loadEmbeds() {
       // Use viewContainerRef to find the location of the embed
    }
}

我最初的想法是将[embeds]转换为带有id的ng-content标签，然后在afterviewinit中创建动态组件时引用索引位置。我知道innerHTML没有绑定/处理组件所以我正在寻找一种方法来动态创建一个viewChild，一种引用嵌入的索引传递给viewContainerRef.createComponent的方法，或者我可以渲染的其他一些替代方法动态html内容和流程嵌入到组件中。

解决方案

在ngOnInit中：
- 查找所有嵌入并替换为ng-content占位符包含唯一ID。
- 稍后会为占位符注册ID 还包含正在创建的组件引用。在
ngAfterViewInit：
- 循环注册表使用render2来查找元素由id。
- 使用ComponentFactoryResolver.resolveComponentFactory动态创建组件工厂，然后调用在工厂上创建元素作为参考的位置注入（即factory.create（this.injector，[]，el）。
- 更新注册表以包含稍后进行清理的组件引用。

在Angular 2/4中沿着html渲染动态组件

0 个答案: