Angular4中的辅助路由详解

理解辅助路由

通常情况下，Angular 组件模板中只能定义一个主要的路由插座。然而，通过使用辅助路由，我们可以定义额外的插座来显示不同的组件，这些组件可以通过特定的路由进行导航。例如，在线购物时，用户可以在浏览商品的同时，打开一个客服聊天窗口，这两个操作互不影响。

辅助路由的语法

辅助路由的实现涉及到几个关键步骤：首先是在模板中定义带有名称的辅助插座；其次是在路由配置中指定这些插座显示的组件；最后是通过路由链接或编程方式导航至这些插座。下面通过一个简单的示例来说明这一过程。

实现辅助路由

步骤一：定义插座

在应用的主要组件模板中，除了默认的路由插座之外，还可以定义一个或多个带有 name 属性的辅助插座。例如：

<router-outlet>router-outlet>

<router-outlet name="auxiliary">router-outlet>

步骤二：配置路由

接下来，在路由配置文件中，需要为每个辅助插座指定可以显示的组件。这通常通过在路由配置数组中为每个路由项添加 outlet 属性来完成。例如：

// 导入必要的模块和组件
import { Routes } from '@angular/router';
import { ChatComponent } from './chat/chat.component';

const appRoutes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'chat', component: ChatComponent, outlet: 'auxiliary' },
  { path: 'home', component: HomeComponent },
  { path: 'product/:id', component: ProductComponent, children: [
    { path: '', component: ProductDescComponent },
    { path: 'seller/:id', component: SellerInfoComponent }
  ]}
];

步骤三：导航至辅助路由

最后一步是通过路由链接或编程方式导航至辅助路由。例如，可以通过点击链接来显示或隐藏聊天组件：

<a [routerLink]="[{ outlets: { auxiliary: 'chat' } }]">开始聊天a>

<a [routerLink]="[{ outlets: { auxiliary: null } }]">结束聊天a>

效果展示

通过上述步骤，你可以在同一个页面中同时显示多个组件，并且这些组件可以独立地响应用户的交互。这种设计模式非常适合构建复杂的单页应用程序（SPA），如在线购物平台、社交媒体应用等。