两个组件同时可见 - 出口 1 和出口 2

Question

我无法理解角度路由的以下行为。 我只有两个组件

HomeTestComponent

和

CustomerComponent

。当我按下

Home

按钮，然后按下

Customer

按钮时，两个组件都会显示 - 我希望一次只有一个组件可见？

这是我的app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomerComponent } from './customer/customer.component';
import { HomeTestComponent } from './home-test/home-test.component';

const routes: Routes = [
  { path: 'customer', loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule) },
  { path: 'home', component: HomeTestComponent, outlet : "outlet2" }
];

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

这是我的app.component.html

<h1>
  {{title}}
</h1>

<button type="button" [routerLink]="['customer', { outlets:{ outlet1: ['cust'] }} ]">Customer</button>
<button type="button" [routerLink]="['', { outlets:{ outlet2: ['home'] }}]">Home</button>

<router-outlet></router-outlet>

<div class="container">
<div class="row"><router-outlet name="outlet1"></router-outlet></div>
<div class="row"><router-outlet name="outlet2"></router-outlet></div>
</div>

这是我的 customer-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomerComponent } from './customer.component';

const routes: Routes = [{ path: 'cust', component: CustomerComponent, outlet: "outlet1" }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CustomerRoutingModule { }

Answer 1

您似乎在 Angular 应用程序中使用命名的路由器出口。命名路由器出口允许您在应用程序布局中拥有多个出口，可以同时加载不同的组件。

让我们浏览一下您的代码，了解为什么当您按下“主页”按钮，然后按下“客户”按钮时，会显示这两个组件。

1. 应用程序路由.module.ts：

您定义了两条路线： '/customer' 延迟加载 CustomerModule。 '/home' 将 HomeTestComponent 加载到命名的插座 'outlet2' 中。 “home”路线使用名为“outlet2”的出口。 app.component.html：

您有两个按钮：“客户”和“主页”。 单击“Customer”按钮会将路由设置为“/customer”，并激活名为“outlet1”的outlet 内的“cust”路由。 单击“Home”按钮将路由设置为“/”，并激活名为“outlet2”的“outlet2”内的“home”路由。 客户路由.module.ts：

定义路由“/cust”，将 CustomerComponent 加载到指定的出口“outlet1”中。

当您按下“Customer”按钮，然后按下“Home”按钮时，两个组件都会显示，因为 Angular 会同时将组件渲染到两个命名的出口中。

如果您一次只希望一个组件可见，则应重新考虑使用命名插座。如果您打算有两个可以加载组件的独立区域，那么命名出口是正确的方法。否则，如果您想一次只显示一个组件，您可以使用主路由器插座而不命名它。

以下是修改代码以实现此目的的方法：

1. 从路线和模板中删除指定的出口。
2. 定义您的路线，无需指定出口。
3. 使用模板中的主路由器插座。

这是代码的修改版本：

app-routing.module.ts：

    const routes: Routes = [
  { path: 'customer', loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule) },
  { path: 'home', component: HomeTestComponent }
];

app.component.html：

<h1>{{title}}</h1>

<button type="button" [routerLink]="['customer']">Customer</button>
<button type="button" [routerLink]="['home']">Home</button>

<router-outlet></router-outlet>

通过这些修改，一次仅显示一个组件，具体取决于您单击的按钮。