Question

我有一个带有以下材料设计布局的angular2应用程序

我将侧边栏，标题和仪表板分成了单独的组件。我想根据侧栏上的用户cliks动态加载仪表板。

如何实现这一目标。任何帮助是极大的赞赏。

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() {}

}

Answer 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]
})

以angular2动态加载仪表板内容

1 个答案: