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

Question

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

现在我只有两个页面，我想在 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。然后 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 转换为可以处理 '/dashboard' 路由的 Child Routing Component。

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

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

Load child component inside other component based on URL route

angular

angular2-routing