在 angular2 中动态加载仪表板内容答案

【问题标题】：Dynamically load dashboard content in angular2在 angular2 中动态加载仪表板内容
【发布时间】：2016-05-17 06:54:13
【问题描述】：

我有一个具有以下计量设计布局的 angular2 应用程序

我已将侧边栏、标题和仪表板分成单独的组件。我想根据用户在侧边栏上的点击动态加载中间的仪表板。

如何做到这一点。任何帮助是极大的赞赏。

import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES,CanActivate} from 'angular2/router';
import {AuthHttp,AuthConfig, tokenNotExpired, AUTH_PROVIDERS} from 'angular2-jwt';


import {HomeComponent} from '../home/HomeComponent'
import {AboutComponent} from '../about/AboutComponent'
import {HeaderComponent} from './HeaderComponent'
import {LoginComponent} from '../login/LoginComponent'
import {AuthService} from '../../services/AuthService'
import {SidebarComponent} from './SidebarComponent'
import {DashboardComponent} from './DashboardComponent'


@RouteConfig([
    {path: 'app/home', component: HomeComponent, as: 'Home'},
    {path: 'app/about', component: AboutComponent, as: 'About'},    
    {path: 'app/login', component: LoginComponent, as: 'Login'},
    {path: 'app/*', redirectTo: ['Login']}   // this redirect is not working for some reason
])
@Component({
    selector: 'my-app',
   template: `
    <body>
    <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
      <app-header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600"></app-header>
      <app-sidebar class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
      </app-sidebar>
      <main class="mdl-layout__content mdl-color--grey-100">
        <dashboard></dashboard>
      </main>

    <script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
  </body>
  <router-outlet></router-outlet>
    `, 
    directives: [ROUTER_DIRECTIVES,SidebarComponent,HeaderComponent,DashboardComponent],
    providers: [AUTH_PROVIDERS,AuthService]
})

export class AppComponent { 

  constructor() {}

}

【问题讨论】：

为什么你的<router-outlet></router-outlet> 在你的body 元素之外？此标签用于设置渲染路由输出的位置（Home、About、Login ...）
应该没有任何区别，只要它在模板里面``..据我所知。
不，<router-outlet></router-outlet> 是一个占位符，它会替换为您路由到的组件的实际内容。我想你想要的是用router-outlet 替换你的dashboard 标签。
它有点工作.. 但仪表板模板显示在页面的最底部，而不是按预期显示在右侧面板中。有什么想法吗？
对不起我的坏..我没有从底部移除另一个路由器插座，这就是原因。它现在正在工作。如果您能回答这个问题，我会将其标记为已接受。感谢您的帮助。

标签： angularjs angular material-design

【解决方案1】：

RouterOutlet 是您路由到的组件内容的占位符。它应该放置在您希望渲染路线内容的位置。在您的情况下，只需将 dasboard 标签替换为您放置在模板底部的 router-outlet 标签，如下所示：

@Component({
    selector: 'my-app',
   template: `
    <body>
    <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
      <app-header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600"></app-header>
      <app-sidebar class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
      </app-sidebar>
      <main class="mdl-layout__content mdl-color--grey-100">
        <router-outlet></router-outlet>
      </main>

    <script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
  </body>
    `, 
    directives: [ROUTER_DIRECTIVES,SidebarComponent,HeaderComponent],
    providers: [AUTH_PROVIDERS,AuthService]
})

【讨论】：