Показать шаблоны из разных компонентов на том же месте

Я пытаюсь переписать администрирование приложения на Angular2. У меня есть 3 компонента (AppComponent, SystemComponent и ShopComponent).Показать шаблоны из разных компонентов на том же месте

AppComponent:

import {Component} from 'angular2/core'; 
import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router'; 
import {SystemComponent} from "./system.component"; 

@Component({ 
    selector: 'app', 
    templateUrl: '/templates/layout', 
    directives: [ROUTER_DIRECTIVES] 
}) 

@RouteConfig([ 
    { 
     path: '/', 
     redirectTo: ['/System'], 
     useAsDefault: true 
    }, 
    { 
     path: '/-1/...', 
     name: 'System', 
     component: SystemComponent 
    } 
]) 
export class AppComponent { 
    constructor(router: Router){ 
     router.navigate(['/System']); 
    } 
}

SystemComponent:

import {Component} from 'angular2/core'; 
import {RouteConfig, RouterOutlet} from 'angular2/router'; 

@Component({ 
    directives: [RouterOutlet] 
}) 
export class SystemComponent {}

ShopComponent:

import {Component} from 'angular2/core'; 
import {RouteConfig, RouterOutlet} from 'angular2/router'; 

@Component({ 
    directives: [RouterOutlet] 
}) 
export class ShopComponent {}

мне нужно модифицировать SystemComponent и ShopComponent, чтобы загрузить другой шаблон в двух разных местах с различным дизайном и содержанием (подробно на фиг.)

источник

2016-01-16 JaSHin

Я не уверен, что это то, что вам нужно для реальной реализации, но для этого сценария вам не нужно менять шаблоны компонента, вам просто нужно обслуживать другой компонент для разных маршрутов. Создайте '' в своем основном компоненте «AppComponent» и настройте на нем три разных маршрута: один обрабатывает '/ system' с чем-то вроде« IndexComponent', а не «AppComponent», другой обрабатывает '/ system/- 1' на 'SystemComponent', а третий обрабатывает'/system/2' '' ShopComponent'. – Langley

Другим способом является подключение базовой компоновки в «AppComponent» и дочерних маршрутах сервера, обозначающих маршрут как «/ system/...», который указывает на другой компонент маршрутизации, который обрабатывает маршруты «/ -1» и «/ 2» к его соответствующему компоненту в свой собственный '<маршрутизатор-выход>'. – Langley

@Langley Это хорошая идея, но у меня есть 2 меню, поэтому мне пришлось иметь два маршрутизатора (один для левого меню и второй для верхнего меню). – JaSHin

Вы не можете динамически изменять templateUrl Компонента. Один компонент - одна html-страница.

Что вы можете сделать, это использовать управление потоком, например * ngIf или * ngSwitch, чтобы загрузить другую часть шаблона на основе некоторых критериев.

источник

2016-01-16 12:17:01

Я не хочу менять динамический templateUrl. Скорее, мне нужно использовать 2 templateUrl одновременно. – JaSHin

Это невозможно. Вместо этого вы можете создать два дочерних компонента и использовать DCL (Dynamic Component Loader) для их включения, опять же, на основе некоторых критериев. –

Могу ли я использовать компоненты вместо шаблонов в выделенных областях? В этом случае это будет один основной компонент и четыре подкомпонента. – JaSHin

Показать шаблоны из разных компонентов на том же месте

ответ

Смежные вопросы