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，因此我可以在dashboard组件中显示admin组件。

如果我然后导航到：/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) {
  }
}

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

如何判断角度2 /admin应始终重定向到/admin/dashboard
如何加载（基于网址/admin/dashboard）首先AdminComponent及其内部（通过router-link）Dashboard组件

Answer 1

将@RouteConfig添加到AppComponent后，它就会成为Routing Component。而不是试图处理'/dashboard'中的AppComponent路线并重定向，最好将AdminComponent转变为可以处理Child Routing Component路线的'/dashboard'。< / p>

通过向path: '/admin/...'添加三个点，您将让角度路由器知道/dashboard的{{1}}部分将由子路由组件（/admin/dashboard）处理

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

1 个答案: