Question

我正在尝试根据点击“Cadastros”操作来加载菜单，但我认为问题是“workspaceSelected”属性对所有组件都不可见。

我相信这种情况的正确位置是属于“workspaceSelected”的属性在组件sidenav中，但我不知道如何处理这种情况。

我想点击动作“Cadastros”，然后她开关加载正确的html组件。

主要组件类：

export class PrincipalComponent implements OnInit {

  workspaceSelecionada: string;

  constructor() { }

  ngOnInit() {
  }
}

主要组成部分：

<header>
    <app-navbar></app-navbar>
    <app-sidenav></app-sidenav>
</header>
<div class="container" [ngSwitch]="workspaceSelecionada">
    <app-cadastros *ngSwitchCase="'cadastros'"></app-cadastros>
    <app-movimentacoes *ngSwitchCase="'movimentacoes'"></app-movimentacoes>
    <app-administracao *ngSwitchCase="'administracao'"></app-administracao>
    <app-relatorios *ngSwitchCase="'relatorios'"></app-relatorios>
    <app-configuracoes *ngSwitchCase="'configuracoes'"></app-configuracoes>
    <app-dashboard *ngSwitchDefault></app-dashboard>
</div>

APP-sidenav：

<!--SideNav-->
<ul id="slide-out" class="side-nav grey darken-2">
  <li>
    <div class="userView">
      <div class="background">
        <img src="images/office.jpg">
      </div>
      <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
      <a href="#!name"><span class="white-text name">John Doe</span></a>
      <a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>
    </div>
  </li>
  <li>
    <a (click)="workspaceSelecionada = 'cadastros'" class="btn-large waves-effect waves-light indigo darken-3">CADASTROS</a>
  </li>
  <li>
    <a class="btn-large waves-effect waves-light purple darken-3">MOVIMENTAÇÕES</a>
  </li>
  <li>
    <a class="btn-large waves-effect waves-light orange darken-3">ADMINISTRAÇÃO</a>
  </li>
  <li>
    <a class="btn-large waves-effect waves-light yellow darken-3">RELATÓRIOS</a>
  </li>
  <li>
    <a class="btn-large waves-effect waves-light light-green darken-3">CONFIGURAÇÕES</a>
  </li>
</ul>
<a data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

Answer 1

如上面评论中所述，为应用程序定义路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {CadastrosComponent} from './...component';
....

const appRoutes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'cadastros', component: CadastrosComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

然后在您的应用模块中导入路由模块：

imports: [AppRoutingModule]

然后在主要组件中使用switch case语句，而不是如下所示定义路由器插座：

<router-outlet></router-outlet>

然后在侧导航组件模板的锚标记中，定义路由器链接，如下所示：

<a routerLink="/cadastros">CADASTROS</a>

希望这有帮助！如果您遇到任何实施挑战，请告诉我。

Angular 4开关具有不同的组件

1 个答案: