如何在子视图内单击[routerLink]到另一个子视图?

时间:2018-10-02 22:13:03

标签: angular typescript router

我在Angular网站中的视图存在一个小问题,因为我正在尝试在应用程序中将一个孩子的视图移到另一个孩子的视图。当我单击带有routerlink的按钮时,将我带到视图,但是问题是视图变暗了,直到我用f5或从我的网络导航器重新加载button

路线

const routes: Routes = [
  {
    path:'',
    component: HomeComponent
  },
  {
    path:'login',
    component: LoginComponent
  },
  {
    path:'administrator',
    component: AdministratorComponent,
    canActivate: [AuthGuard],
    children:
    [
      { path: '', component: DashboardComponent },
      { path: 'contact', component: ContactComponent },
      { path: 'information', component: InformationComponent },
      { path: 'logout', component: LogoutComponent },
      { path: 'letter', component: LetterComponent },
    ]
  },
  { path: 'home', component: HomeComponent },
  { path: 'error', component: ErrorComponent },
  {
    path: '**',
    redirectTo: "/error"
  }
];

这是我的网页的模型:

Model Page

并尝试访问我的孩子视图:

<button type="button" class="btn btn-success" [routerLink]="['/administrator/letter']">
    Check
</button>
  

注意::如果我从AdministratorComponent进行访问,就像我想要的一样,但是在这种情况下,我需要另一种方法来实现它。

如何正确访问该视图?

1 个答案:

答案 0 :(得分:1)

我不会删除此问题,因为此错误或错误可能发生在另一个人身上。在这种情况下,我已经忘记说在视图中使用的是模态窗口,因此用于访问其他辅助视图的模态窗口的类保持激活状态(这会掩盖正在访问的视图)

就是这样:

Bootstrap's class

好的,怎么解决呢?

您只需要使用一个属性来关闭模式:data-dismiss

<button type="button" class="btn btn-success" data-dismiss="modal" [routerLink]="['/administrator/letter']">
   Check
</button>