Html 具有不同组件的角度4开关

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

我认为这种情况下的正确位置应该是位于component sidenav中的属性“workspaceSelected”，但我不知道如何处理这种情况

我想点击动作“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>

地籍


乔伊斯电影


行政官


雷拉蒂奥斯


构型


菜单

如上注释所示，为应用程序定义路由模块：

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 {

}

然后在应用程序模块中导入路由模块：

导入：[批准模块]

然后，在主组件中定义路由器出口，而不是交换机案例陈述，如下所示：

<router-outlet></router-outlet>

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

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

<router-outlet></router-outlet>

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

CADASTROS

---

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

如上文评论中所建议，请为应用程序定义路由模块：

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 {

}

然后在应用程序模块中导入路由模块：

导入：[批准模块]

然后，在主组件中定义路由器出口，而不是交换机案例陈述，如下所示：

<router-outlet></router-outlet>

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

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

<router-outlet></router-outlet>

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

CADASTROS

---

希望这有帮助！如果您在实现它时遇到任何挑战，请务必告诉我。

我认为这不是

ngSwitch

的好用途。请看一看角度

路由器

。@joh04667您能举例说明答案吗？因为我是一个初学者，所以一点好的练习可以被认为是一个答案。我认为这不是

ngSwitch

的好用法。请看一看角度

路由器

。@joh04667您能举例说明答案吗？因为我是初学者，所以一点好的练习可以被认为是一个答案。@AndreiGheorghiu谢谢你的帮助！我是CSS新手，你的代码真的帮助了我。我面临着同样的情况，我不能使用路由器插座，因为我已经有了一个。我能在其他地方做这个吗way@AndreiGheorghiu谢谢你的帮助！我是CSS新手，你的代码真的帮助了我。我面临着同样的情况，我不能使用路由器插座，因为我已经有了一个。我能用其他方式做吗