javascript - angular2中templatURL中的动态模板

Question

每当我必须在页面中动态包含模板时，我一直在 Angular 1 中使用 ng-include。

现在如何在 Angular 2 中实现这一点。我尝试搜索并找到了这些:

https://groups.google.com/forum/#!topic/angular/ROkKDHboWoA ,

https://github.com/angular/angular/issues/2753

有人可以解释如何在 angular2 中执行此操作，因为链接说由于某些安全原因未包含 ng-include。

或者至少如何在 templateUrl 属性中使用可验证值，以便可以在服务器端处理可验证值以提供模板...

Answer 1

正如您在此 issue 中看到的那样在 Angular 仓库中，我们很可能不会得到该指令。我们是否需要这个指令已经进行了很长时间的讨论，如果没有提供我们如何自己实现它。

我试着举了一个简单的例子来说明它是如何实现的。

@Component({
    selector: 'my-ng-include',
    template: '<div #myNgIncludeContent></div>'
})
export class MyNgInclude implements OnInit {

    @Input('src')
    private templateUrl: string;

    @ViewChild('myNgIncludeContent', { read: ViewContainerRef })
    protected contentTarget: ViewContainerRef;

    constructor(private componentResolver: ComponentResolver) {}

    ngOnInit() {
        var dynamicComponent = this.createContentComponent(this.templateUrl);
        this.componentResolver.resolveComponent(dynamicComponent)
            .then((factory: any) => this.contentTarget.createComponent(factory));
    }

    createContentComponent(templateUrl) {
        @Component({
            selector: 'my-ng-include-content',
            templateUrl: templateUrl,
            directives: FORM_DIRECTIVES,
        })
        class MyNgIncludeContent {}
        return MyNgIncludeContent ;
    }
}

要查看演示，请查看 Plunker .