angular - 根据 URL 路由在其他组件中加载子组件

Question

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

现在我只有两个页面，我想加载第三个路由 (dashboard) 作为 admin 页面中的子组件。

@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。 dashboard 组件应替换为 users 组件。等等

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

@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) {
  }
}

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

• 我如何告诉 Angular 2 /admin 应该总是重定向到 /admin/dashboard
• 如何首先加载(基于 URL /admin/dashboard)AdminComponent 并在其中加载(通过 router-link ) Dashboard 组件

Answer 1

一旦你将 @RouteConfig 添加到你的 AppComponent 中，它就变成了一个 Routing Component。与其尝试处理 AppComponent 中的 '/dashboard' 路由并重定向，不如将 AdminComponent 转换为 Child Routing可以处理 '/dashboard' 路由的组件。

通过向 path: '/admin/...' 添加三个点，你会让 Angular Router 知道 /dashboard 部分 /admin/dashboard 将由子路由组件 (AdminComponent) 处理。