URL динамического шаблона в Angular 2

У меня есть две разные боковые панели, и я хочу, чтобы переменная, которую я получаю по URL-адресу, переключилась между двумя шаблонами.

@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

есть решение? а что это за ошибка? Спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
347
2

Ответы 2

я нахожу решение:

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

изменить temlateURL на шаблон

но он не работает

Почему бы не установить защиту маршрутизатора с шаблоном боковой панели, а затем переключение на основе маршрута или URL-адреса. Модуль боковой панели с 2 разными боковыми панелями и 2 маршрутами для этого модуля. Шаблон1, Темпалте2.

Только мои 2 цента.

спасибо за ответ, я не понял о чем вы?

issam 28.06.2018 16:20

Другие вопросы по теме