在 Angular 中，我们可以使用路由来导航到不同的页面。通常情况下，我们使用路由器来定义路由，然后在组件中使用 RouterLink 来导航到不同的路由。但是，在某些情况下，我们需要根据不同的条件导航到不同的路由。这时，我们可以使用 ngSwitch 指令来实现多路由。
ngSwitch 指令
ngSwitch 指令是 Angular 中的一个结构性指令，用于根据不同的条件显示不同的内容。它的语法如下：
<container-element [ngSwitch]="conditionExpression"> <some-element *ngSwitchCase="case1Exp">...</some-element> <some-element *ngSwitchCase="case2Exp">...</some-element> <some-element *ngSwitchDefault>...</some-element> </container-element>
其中，conditionExpression 是一个表达式，用于确定当前的条件，case1Exp、case2Exp 是不同的条件表达式，*ngSwitchCase 指令用于指定不同的条件，*ngSwitchDefault 指令用于指定默认的条件。
ngSwitch 实现多路由
在 Angular 中，我们可以使用 ngSwitch 指令实现多路由。具体步骤如下：
- 在组件中定义不同的路由：
const routes: Routes = [
{ path: 'route1', component: Route1Component },
{ path: 'route2', component: Route2Component },
{ path: 'route3', component: Route3Component }
];- 在组件中定义不同的条件表达式：
public conditionExpression: string = 'route1';
- 在组件的模板中使用 ngSwitch 指令：
<div [ngSwitch]="conditionExpression"> <router-outlet *ngSwitchCase="'route1'"></router-outlet> <router-outlet *ngSwitchCase="'route2'"></router-outlet> <router-outlet *ngSwitchCase="'route3'"></router-outlet> </div>
其中，ngSwitchCase 指令的值应该与路由中定义的路径一致。
- 在组件中使用 RouterLink 来改变条件表达式：
<a routerLink="/route1" (click)="conditionExpression = 'route1'">Route 1</a> <a routerLink="/route2" (click)="conditionExpression = 'route2'">Route 2</a> <a routerLink="/route3" (click)="conditionExpression = 'route3'">Route 3</a>
这样，当用户点击不同的链接时，就会根据条件表达式的值来显示不同的路由组件。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------ - --------------- - ---- ---------------------
------ - --------------- - ---- ---------------------
------ - --------------- - ---- ---------------------
------------
--------- -----------
--------- -
-- -------------------- ---------------------------- - --------------- -----
-- -------------------- ---------------------------- - --------------- -----
-- -------------------- ---------------------------- - --------------- -----
---- ---------------------------------
-------------- -----------------------------------------
-------------- -----------------------------------------
-------------- -----------------------------------------
------
-
--
------ ----- ------------ -
------ -------------------- ------ - ---------
-
------ ----- ------- ------ - -
- ----- --------- ---------- --------------- --
- ----- --------- ---------- --------------- --
- ----- --------- ---------- --------------- -
--总结
在 Angular 中，我们可以使用 ngSwitch 指令实现多路由。通过定义不同的路由和条件表达式，然后使用 ngSwitch 指令来根据条件表达式的值来显示不同的路由组件。这种方式可以帮助我们在某些情况下更加灵活地导航到不同的页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661a1fb5d10417a222adcb80