具有 angular (2/4) 的单页应用程序中的命名路由器

debugcn 发表于 Dev

克里斯托弗·安吉尔

我有一个 angular 应用程序，它有一个登录组件，然后是一个home组件，它是所有 SPA 应用程序的处理程序，我还有三个称为用户的组件，它们具有添加和编辑操作。

这是路由文件的一部分：

 { path: '', component: LoginComponent },
 { path: 'login', component: LoginComponent },
 { path: 'home', component: HomeComponent, canActivate: [AuthGuard]},
 { path: 'users', component: UsersMenuComponent, canActivate: 
 [AuthGuard], outlet: 'userMenu'},
 { path: 'users/add', component: AddUserComponent, canActivate: 
 [AuthGuard] },
 { path: 'users/edit', component: EditUserComponent, canActivate: 
 [AuthGuard] },
 { path: '**', redirectTo: 'login', pathMatch: 'full' }

在我的 app.component.html 我有这个：

<div class="container">
  <router-outlet></router-outlet>
</div>

这是home组件的一部分：

<div>
//code of the sidebar
</div>
<div>
//code of the navbar
</div>
<div class="col content">
 //this is where i don't know what to do
  <router-outlet name="userMenu"></router-outlet>
</div>

如您所见，我在名为 userMenu 的路由器插座中设置了一个名称，并在路由文件中将其设置为与UsersMenuComponent 中的名称相同

在这部分是我丢失的地方，我尝试了几种方法来尝试让我的命名路由器显示用户组件，但我无法让它工作。

在html中

class="nav-link" [routerLink]="[{outlets: {'userMenu': ['users']}}]"

在带有变体的 html 中：

class="nav-link" [routerLink]="['/users',{outlets: {'userMenu': ['users']}}]"

在一个按钮中

this.router.navigate(['/users', {outlets: {'userMenu': ['users']}}]);

我在做什么错？

头条

由于 UsersMenuComponent 是 HomeComponent Try 的子项

{ path: 'home', component: HomeComponent, canActivate: [AuthGuard], children: [ path: 'userMenu', component: UsersMenuComponent, outlet: 'userMenu' ] }

然后 this.router.navigate(['/home', { outlets: { userMenu: ['userMenu']}}]

Plunker：https ://plnkr.co/edit/6zh0aTEeWN0hEhRwF6Wt ? p = info

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。