Angular 2个子路由组件加载问题

Question

我正在尝试学习 angular 路由。有两个 select 框。当 select 选项被 selected 时 lookup 函数被调用。我可以访问 ngModel 值。第一个 selectbox 选项是 select ProvinceComponent 正在加载。这里的问题是第二个选择框 selected DistrictComponent 没有加载。这里是 stackblitz https://stackblitz.com/edit/angular-ivy-awpj1d

<select [(ngModel)]="province" (ngModelChange)="lookup($event, 1);">
    <option *ngFor="let i of provinces" [value]="i.i">{{i.n}}</option>
</select>
<select [(ngModel)]="district" (ngModelChange)="lookup($event, 2);">
    <option *ngFor="let i of d" [value]="i.i">{{i.n}}</option>
</select>

此处appRoutes选项

export const appRoutes: Route[] = [
  { path: "", redirectTo: "/analyse", pathMatch: "full" },
   {
     path: "analyse",
     component: AnalyseComponent,
     children: [
       {path: ":province", component: ProvinceComponent,children: [
          { path: ":district", component: DistrictComponent }]
       }
    ]
  }
];

Answer 1

这段代码

component: ProvinceComponent,children: [
    { path: ":district", component: DistrictComponent }]
}

表示 DistrictComponent 将在 Province 组件内部呈现，而不是 <router-outlet>。而且您的 ProvinceComponent 似乎没有插座。只需添加要在父级内部呈现子路由的元素

Angular 2个子路由组件加载问题

Angular 2 child route component loading problem

angular-routing

angular