分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – 在Angular 2中将HTML文件读入模板？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

我也知道我的代码不会返回文件的内容,只是字符串,但我还没有弄清楚如何在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 deter@L_890_4@modalContent(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 ;
    }
}