在同一位置显示来自不同组件的模板

Question

我正在尝试将应用程序的管理重写为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，在具有不同设计和内容的两个不同位置加载不同的模板（详见图）

Answer 1

您无法动态更改Component的templateUrl。一个组件==一个html页面。

您可以使用控制流程，例如 * ngIf 或 * ngSwitch ，根据某些条件加载模板的不同部分。