Angular 6 Lazy Loading 页面刷新时的路由导航

Question

我正在处理 Angular 6 延迟加载并遇到问题。还没有找到任何解决方案。

我的问题是：

我有一个登录页面，我可以在登录后在应用程序上启动时加载有一个主页有一个选择下拉菜单，在第一个选项上选择两个选项 Firstcomponent 将加载（第一个组件有一些信息）并在第二个选项上选择 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 对象以获取活动路由并在您的选择中选择好的选项。