Question

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

无法激活已加载的插座

//索引模块

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 {}

/ Component /

<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路由。

无法激活已激活的角度为6的出口

1 个答案: