次要 Angular6 路由在点击时不执行任何操作。没有错误

Question

以下 sn-ps 是大型应用程序中 angular 6 功能的一部分。顶级应用程序有一个路由器插座，然后这个功能有它自己的 2 个。单击 comp.html 中的链接应该会加载内联的联系人组件，但它什么都不做。期望来自 ContactComponent 的 html 在名为 popup 的路由器出口之后被注入。没有。也没有错误。

对于这个确切的问题，您可以看到联系人组件是从 Angular tutorial 复制意大利面。不知道我做错了什么。我假设路由有问题，但是当路由不匹配时，我得到一个 404，这很好。

home.html

<a [routerLink]="[{ outlets: { popup: ['contact'] }}]">Contact</a>
<router-outlet name="popup"></router-outlet>
<router-outlet></router-outlet>

路线

const routes: Routes =
[
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: '',
        component: ListComponent,
      },
      {
        path: 'details/app/:appid',
        component: DetailsComponent,
      },
      {
        path: 'history',
        component: HistoryComponent,
      },
      {
        path: 'contact',
        component: ContactComponent,
        outlet: 'popup',
      }
    ]
  }
];

ContactComponent.html

<h3>Contact Crisis Center</h3>
<div *ngIf="details">
  {{ details }}
</div>
<div>
  <div>
    <label>Message: </label>
  </div>
  <div>
    <textarea [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
  </div>
</div>
<p *ngIf="!sending">
  <button (click)="send()">Send</button>
  <button (click)="cancel()">Cancel</button>
</p>

Answer 1

看起来这是一个延迟加载模块的角度错误。

https://github.com/angular/angular/issues/10981

https://github.com/angular/angular/issues/24657

在第二个链接中，有人建议解决方法。使用他们的建议，我能够让它工作。以下是我创建的用于复制您的问题并应用解决方法的基本设置。

app-routing.module.ts

const routes: Routes = [
  {
     path: 'home',
    loadChildren: './home/home.module#HomeModule'
  }
];

app.component.ts

<router-outlet></router-outlet>

home-routing.module.ts

const routes: Routes =
[
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'history',
        component: HistoryComponent,
      },
      {
        path: 'contact',
        component: ContactComponent,
        outlet: 'popup',
      }
    ]
  }
];

home.component.html

<div><a [routerLink]="['history']">History</a></div>
<div><a [routerLink]="[{ outlets: { popup: ['contact'] }}]">Contact</a></div>

<router-outlet name="popup"></router-outlet>
<router-outlet></router-outlet>