基於URL路由加載其他組件內的子組件

現在我只有兩個頁面，我想在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) { 
    } 
}

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

我怎麼能告訴角2是/admin應始終重定向到/admin/dashboard
我如何可以加載（基於URL /admin/dashboard）首先是AdminComponent並在其內部（通過router-link）Dashboard組件

來源

2016-01-22 Vivendi

在嵌套組件中使用另一個路由組件和'router-link'。 – Langley

@Langley不確定你的意思？現在，當我導航到'/ admin/dashboard'時，它不起作用。我在'AdminComponent'中有'router-link'，但'dashboard'組件沒有顯示在裏面。當我進入'/ admin/dashboard'時，'Admin'組件甚至不會加載。 – Vivendi

，而不是在'AppComponent'中添加'/ dashboard'路由，將其添加到'AdminComponent'中並讓'AdminComponent'包含另一個''。這樣'AppComponent'將解決路徑中的'/ admin'部分，'AdminComponent'將解析路徑'/ dashboard'的第二部分。另外請注意，'router-link'不是一個標籤，它是一個用於定義路由名稱的屬性，如：' – Langley

將@RouteConfig添加到您的AppComponent之後，它將變爲Routing Component。而不是試圖處理'/dashboard'路線AppComponent和重定向，可能會更好地將AdminComponent變成Child Routing Component，它可以處理'/dashboard'路線。

通過增加三個點path: '/admin/...'你讓角路由器知道的/admin/dashboard的/dashboard部分將由兒童路由組件（AdminComponent）來處理。

來源

2016-01-22 21:27:29 Langley

基於URL路由加載其他組件內的子組件

回答

相關問題