不能激活已激活的出口角6

Question

我的项目使用2个模块的那一刻起indexModule和Sign-In module。问题是，当我致电lazyloaded模块，并添加到它的出口名称就说明我的问题

不能激活所加载的出口

//索引模块

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>

Answer 1

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

这是怎么回事是的ContainerComponent路线是你SignInComponent路线的前缀。这将导致路由器访问SignInComponent路由时激活两个途径。由于这两个路由的指定相同的插座，则路由器出口与2个不同的部件启动两次。通过添加pathMatch: 'full'，该路线的ContainerComponent不会访问使用它的路径作为前缀的路由时被激活。