无法激活已激活的出口角 6答案

【问题标题】：Cannot activate an already activated outlet angular 6无法激活已激活的出口角 6
【发布时间】：2019-03-13 13:30:01
【问题描述】：

我的项目目前使用 2 个模块 indexModule 和 Sign-In module。问题是，当我调用延迟加载模块并向其添加插座名称时，它会显示一个问题

无法激活加载的插座

//索引模块

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NavbarComponent} from './02_navbar_component/navbar.component';
import {IndexComponent} from './01_index_component/index.component';
import {SliderComponent} from './03_slider_component/slider.component';
import {SlideshowModule} from 'ng-simple-slideshow';
import {PageComponent} from './04_page_component/page.component';
import {BottomComponent} from './05_bottom_component/bottom.component';
import {SharedModule} from '../shared_Module/shared.module';
import {RouterModule, Routes} from '@angular/router';
import { RouterComponent } from './00_router_component/router.component';
import { ContainerComponent } from './06_container_component/container.component';

const routes: Routes = [{
    path: '',
    component: IndexComponent,
    children: [{
        path: '',
        component: ContainerComponent,
        outlet: 'container'
      },
      {
        path: 'sign-in',
        loadChildren: './../signIn_Module/sign-in.module#SignInModule'
      },
      {
        path: '**',
        redirectTo: '',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full'
  }
];
@NgModule({
  declarations: [
    NavbarComponent,
    IndexComponent,
    SliderComponent,
    PageComponent,
    BottomComponent,
    RouterComponent,
    ContainerComponent,
  ],
  imports: [
    BrowserModule,
    SlideshowModule,
    SharedModule,
    RouterModule.forRoot(routes),
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [RouterComponent]
})
export class IndexModule {}

//登录模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SignInComponent } from './01_signIn_component/sign-in.component';
import {RouterModule, Routes} from '@angular/router';

const signRoutes: Routes = [{
  path: '',
  component: SignInComponent,
  outlet: 'container'
}];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(signRoutes)
  ],
  declarations: [SignInComponent]
})
export class SignInModule {}

/组件/

<ul>
  <li><a href="">Insctructor</a></li>
  <li><a href="">Former</a></li>
  <li><a href="">Sign Up</a></li>
  <li><a routerLink="/sign-in">Log in</a></li>
</ul>
<app-navbar></app-navbar>
<router-outlet name="container"></router-outlet>
<app-footer></app-footer>

【问题讨论】：

你为什么要指定outlet: 'container'？
因为我希望加载模块的组件显示在这个容器中
你有多个router-outlets吗？
是的，我目前确实有一个两个路由器

标签： angular routing lazy-loading angular6 router-outlet

【解决方案1】：

您需要将pathMatch: 'full' 添加到ContainerComponent 的路由定义中。

发生的事情是 ContainerComponent 路由是 SignInComponent 路由的前缀。这会导致路由器在访问 SignInComponent 路由时激活这两个路由。由于这两条路由都指定了同一个出口，因此路由器出口被激活了两次，其中包含 2 个不同的组件。通过添加pathMatch: 'full'，当访问使用其路径作为前缀的路由时，ContainerComponent 路由将不会被激活。

【讨论】：