Question

我正在处理角度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对象以获取活动路由并在选择的内容中选择好选项。

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

1 个答案: