Angular 2中的动态模板URL

时间:2018-06-08 14:45:41

标签: javascript angular typescript angular2-directives

我有两个不同的侧边栏,我希望从我从网址返回的变量,在两个templateURL之间切换。

@Component({
    selector: 'sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: [
        './sidebar.component.css'
    ]
})

我做了这个,但我有一条消息错误:

import {
  Compiler, Component, Injector, VERSION, ViewChild, NgModule, NgModuleRef,
  ViewContainerRef, AfterViewInit, OnInit
} from '@angular/core';
@Component({
    selector: 'sidebar',
    templateUrl: '<ng-container #dynamicTemplate></ng-container>',
    styleUrls: [
        './sidebar.component.css'
    ]
})

export class SidebarComponent implements OnInit {
@ViewChild('dynamicTemplate', {read: ViewContainerRef}) dynamicTemplate;
constructor(
private _compiler: Compiler,
        private _injector: Injector,
        private _m: NgModuleRef<any>
) {}
ngAfterViewInit() {
        let myTemplateUrl = './sidebar.component.html';

        if (this.modee === 'char') {
            myTemplateUrl = './Othersidebar.component.html';
        }
        const tmpCmp = Component({
            moduleId: module.id, templateUrl: myTemplateUrl
        })(class {
        });
        const tmpModule = NgModule({declarations: [tmpCmp]})(class {
        });

        this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
            .then((factories) => {
                const f = factories.componentFactories[0];
                const cmpRef = f.create(this._injector, [], null, this._m);
                cmpRef.instance.name = 'dynamic';
                this.dynamicTemplate.insert(cmpRef.hostView);
            });
    }

并且这是错误消息:

client?afea:119 ..../app/sidebar.component.ts
Module not found: Error: Can't resolve './<ng-container #dynamicTemplate></ng-container>' in '.....\app\sidebar'
 @ ./src/main/webapp/app/layouts/sidebar/sidebar.component.ts 303:18-77
 @ ./src/main/webapp/app/layouts/index.ts
 @ ./src/main/webapp/app/app.module.ts
 @ ./src/main/webapp/app/app.main.ts
 @ multi (webpack)-dev-server/client?http://localhost:9060 webpack/hot/dev-server ./src/main/webapp/app/app.main

有解决方案吗?这是什么错误? THX

2 个答案:

答案 0 :(得分:0)

我找到了解决方法:

templateUrl: '<ng-container #dynamicTemplate></ng-container>',

将temlateURL更改为模板

但他不工作

答案 1 :(得分:0)

为什么没有带有侧边栏模板的路由器防护,然后根据路由或URL进行切换。具有2个不同侧边栏和该模块2条路径的侧边栏模块。模板1,Tempalte2。

只需2美分。