Angular 6延迟加载页面上的导航导航

Question

我正在处理角度6延迟加载，并遇到了问题。 找不到任何解决方案。

我的难题是：

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