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

Question

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

我的问题是：

我有一个登录页面，我可以在登录后启动应用程序时加载该页面，主页上有一个 select 下拉菜单，第一个选项 select 上有两个选项第一个组件将加载（第一个组件有一些信息）并在 select 上第二个选项第二个组件将在 select 下拉列表下加载（第二个组件也有一些信息）。现在我的问题是在该页面上刷新时 http://localhost:4300/home/first 刷新 select 下拉列表和第一个组件加载相同但是 select 下拉字段在这里显示为空白并且想要 selected与第一个选项。有什么解决办法吗

提前致谢。

这是我的代码。

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 对象以获取活动路由和 select 您 select 中的好选项。

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

Angular 6 Lazy Loading routes navigation on page refresh

routing

lazy-loading

angular2-routing

angular

angular6