首页 文章

基于URL路由在其他组件内加载子组件

提问于
浏览 次
3

我正在尝试根据路由在另一个组件中加载子组件 .

现在我只有两个页面，我想在 admin 页面中加载第三个路径（ dashboard ）作为子组件 .

@Component({
    selector: 'my-app',
    directives: [ ROUTER_DIRECTIVES ],
    template: `<router-outlet></router-outlet>`
})

@RouteConfig([
    {path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true},
    {path: '/admin', name: 'Admin', component: AdminComponent},
    {path: '/dashboard', name: 'Dashboard', component: DashboardComponent},
])
export class AppComponent { }

我从登录页面开始默认（现在已经足够了） . 在那个页面上，我点击了一个登录按钮，它将从 LoginComponent 进行重定向 . 像这样：

public login() {
    this.router.navigate(['/Admin']);
}

然后我结束了 /admin 页面 . 但是在那个页面上，我想根据URL显示来自其他组件的数据 . 例如，我希望 /admin 重定向到 /admin/dashboard ，因此我可以在 admin 组件中显示 dashboard 组件 .

如果我然后导航到类似： /admin/users . 然后应使用 users 组件替换 dashboard 组件 . 等等

但是我该如何让它发挥作用呢？我的管理组件如下所示：

@Component({
    selector: 'admin',
    template: `<h1>Admin page</h1>

                Load child components in this routerLink: (but how?)
                <router-link>/router-link>`,
})
export class AdminComponent {
  constructor(private router: Router) {
  }
}

所以我基本上想知道两件事：

  • 如何判断角度2 /admin 应始终重定向到 /admin/dashboard

  • 如何加载（基于URL /admin/dashboard ）首先 AdminComponent 及其内部（通过 router-link ） Dashboard 组件

angular angular2-routing

1 回答

  • 3

    将 @RouteConfig 添加到 AppComponent 后，它变为 Routing Component . 而不是试图在 AppComponent 中处理 '/dashboard' 路线并重定向，可能最好将 AdminComponent 变成 Child Routing Component ，它可以处理 '/dashboard' 路线 .

    通过向 path: '/admin/...' 添加三个点，您将让Angular Router知道 /admin/dashboard 的 /dashboard 部分将由子路由组件（ AdminComponent ）处理 .

    回复于

相关问题