Question

以下摘录是较大应用程序中angular 6功能的一部分。顶级应用程序具有路由器插座，然后此功能拥有其自己的2个。单击comp.html中的链接应该可以内联加载联系人组件，但是没有任何作用。期望的是，刚好在名为popup的路由器出口之后注入ContactComponent中的html。不。也没有错误。

对于这个确切的问题，您可以看到contactcomponent是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>

辅助Angular6路由在单击时不执行任何操作。没错

1 个答案: