angularjs – 在Angular 2中将HTML文件读入模板？

发布时间：2020-12-17 17:04:33 所属栏目：安全来源：网络整理

导读：我正在尝试使用ng2-bs3-modals在Angular 2中创建动态模态.我想根据传递给主组件视图中使用的选择器的参数动态填写模态html正文.当我使用这段代码时,它似乎将我的整个函数视为文本,因此我的模态显示我的’函数determineModalContent’的代码,而不是显示文件内

我正在尝试使用ng2-bs3-modals在Angular 2中创建动态模态.我想根据传递给主组件视图中使用的选择器的参数动态填写模态html正文.当我使用这段代码时,它似乎将我的整个函数视为文本,因此我的模态显示我的’函数determineModalContent’的代码,而不是显示文件内容的预期行为.

我也知道我的代码不会返回文件的内容,只是字符串,但我还没有弄清楚如何在Angular2 / TypeScript中读取文件内容.

import { Component,Input } from 'angular2/core'

@Component({
    selector: 'static-modal',template: '{{modalBody}}'
})


export class StaticModalComponent {
    @Input() modalID;
    template = 'app/shared/modals/static-message-1.html'
    modalBody = function determineModalContent(modalID){
            if(modalID == "1")
                return 'app/shared/modals/static-message-1.html';
            else if(modalID == "2")
                return 'app/shared/modals/static-message-2.html';
            else   
                return 'app/shared/modals/static-message-default.html';
    }
}

解决方法

你需要的是像我想的那样的ng-include.正如你在这篇关于Angular回购的 issue中所看到的,我们很可能不会得到那个指令.我们是否需要这个指令已经进行了长时间的讨论,如果没有提供我们如何通过自己实现它.

我试图给出一个如何实现它的简单例子.

@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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!