Angular 6 页面刷新时延迟加载路线导航

Question

我正在研究 Angular 6 延迟加载，但遇到了问题。

我有一个登录页面，我可以在登录后在应用程序上启动时加载该页面，有一个主页有一个选择下拉列表，其中有两个选项，在第一个选项上选择第一个组件将加载（第一个组件有一些信息）并在选择第二个选项 SecondComponent 将在选择下拉菜单下加载（第二个组件也有一些信息）。

现在我的问题是，当刷新该页面时，即刷新后的 http://localhost:4300/home/first ，选择下拉列表和第一个组件加载相同，但选择下拉字段此处显示为空白，并希望使用第一个选项进行选择。有什么办法解决这个问题吗？

这是我的代码：

app.routing.module.ts

const routes: Routes = [
    {
        path: "",
        redirectTo: "/signIn",
        pathMatch: 'full'
    }, {
        path: "signIn",
        component: SignInComponent
    }, {
        path: "home",
        loadChildren: () => HomeModule
    }, {
        path: "**",
        redirectTo: "/signIn",
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    SignInComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HomeModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HomeModule.ts

@NgModule({
    imports: [
        CommonModule,
        HomeRoutingModule
    ],
    declarations: [
        HomeComponent,
        FirstComponent,
        SecondComponent
    ]
})
export class HomeModule { }

home.routing.module.ts

const routes: Routes = [
    {
        path: "",
        component: HomeComponent,
        children: [{
                path: 'first',
                component: FirstComponent
            },{
                path: 'second',
                component: SecondComponent
            }]
    }
];

@NgModule({
    exports: [RouterModule],
    imports: [RouterModule.forChild(routes)]
})
export class HomeRoutingModule{ }

home.component.ts

@Component({
  template: '<select (change)="selectedComponent($event.target.value)">
          <option value="First">First</option>
          <option value="Second">Second</option>
        </select>'
})
export class HomeComponent {
  private selectedComponent(selectedValue: string): void {
    if (selectedValue === "First")
      this.router.navigate(['/home/first']);
    else
      this.router.navigate(['/home/second']);
  }
}

Answer 1

您应该注入ActivatedRoute或RouterState对象来获取活动路由并在选择中选择合适的选项。