根据 URL 路由将子组件加载到其他组件中答案

【问题标题】：Load child component inside other component based on URL route根据 URL 路由将子组件加载到其他组件中
【发布时间】：2016-04-29 13:20:55
【问题描述】：

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

现在我只有两个页面，我想将第三条路由 (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 组件

【问题讨论】：

在嵌套组件中使用另一个路由组件和router-link。
@Langley 不确定您的意思？现在，当我导航到 /admin/dashboard 时，它不起作用。我在AdminComponent 中有一个router-link，但dashboard 组件内部没有显示。当我转到/admin/dashboard 时，Admin 组件甚至不会加载。
不是在AppComponent 中添加/dashboard 路由，而是在AdminComponent 中添加它，并让AdminComponent 包含另一个<router-outlet></router-outlet>。这样AppComponent 将解决路径的“/admin”部分，AdminComponent 将解决路径/dashboard 的第二部分。另请注意，router-link 不是标签，而是用于定义要前往的路线名称的属性，例如：<a [routeLink]="['Admin']">
@Langley 谢谢，搞定了！不得不在我的Admin URL 路由之后添加/...，并且忘记在Admin 组件中添加ROUTE_DIRECTIVES。但在那之后一切都很好。您能否将您的 cmets 放入答案中，以便我接受。

标签： angular angular2-routing

【解决方案1】：

将@RouteConfig 添加到AppComponent 后，它就会变成Routing Component。与其尝试在AppComponent 中处理'/dashboard' 路由并进行重定向，不如将AdminComponent 转换为可以处理'/dashboard' 路由的Child Routing Component。

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

【讨论】：