2016-04-30 119 views
1

我在angular2中路由時遇到了一些問題
我想在我的服務中創建嵌套路由,但是我卡住了。組件「CompnentName」沒有路由配置

@Component({ 
 
    selector : "app", 
 
    directives : [ROUTER_DIRECTIVES], 
 
    template : ` 
 
    <router-outlet></router-outlet> 
 
    ` 
 
}) 
 

 
@RouteConfig([ 
 
    {path: "/**", redirectTo: ['/User', {userId:0}, 'Main']}, 
 
    {path: "https://stackoverflow.com/users/:userId/...", component: User, name: "User", useAsDefault:true}, 
 
    {path: "/main", component: Main, name: "Main"} 
 
])

這是我在這是自舉程序app.ts代碼。
及以下是user.ts包含用戶組件。

@Component({ 
 
    selector : "user", 
 
    directives : [ROUTER_DIRECTIVES, NavBar, UserInfo, Main, Feeds, Notebook], 
 
    template : ` 
 
    <div class="dotebook-main"> 
 
     <nav-bar></nav-bar> 
 
     <div class="dotebook-view"> 
 
     <div class="dotebook-body"> 
 
      <router-outlet></router-outlet> 
 
     </div> 
 
     <div class="dotebook-user"> 
 
      <user-info [user]="user"></user-info> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    ` 
 
}) 
 

 
export class User{ 
 
    constructor(){ 
 
    } 
 
} 
 

 
@RouteConfig([ 
 
    {path: "/", redirectTo : ['Main']}, 
 
    {path: "/main", component: Main, name: 'Main', useAsDefault: true}, 
 
    {path: "/feeds", component: Feeds, name: "Feeds"}, 
 
    {path: "/notebook/:notebookId", component: Notebook, name: "Notebook"} 
 
])

我要讓「/用戶/:用戶id」是根的時候,
我想「/用戶/:用戶名/主」是默認頁面。

用戶組件應該有兒童路線,如
'/ user /:userId/main'或'/ user /:userId/feeds'等等。

所以我在app.ts中的用戶組件url的末尾添加了'/ ...'。

但我在這一點上遇到了問題。

我覺得路由「主」,應在用戶組件完成,但是,
讓用戶去「用戶/:用戶名/主」在第一時間,
我需要使用「redirectTo」在app.ts routeConfig。

和我得到組件「用戶」沒有路線配置錯誤在此。

我認爲這違反了我所做的url層次結構。
但我不能事件猜測是什麼解決方案。

有沒有人有類似的問題呢?
幫助!
在此先感謝!

+0

「我想在我的服務中製作嵌套路線」聽起來很奇怪。服務沒有路由,只有組件。第一個代碼塊中的路由應用於什麼組件並不明顯,而不是第二代碼塊中的路由應用於哪個組件的外觀(或它的組件)。 –

+0

哦,我的意思是,我希望用戶組件始終顯示。用戶組件中有nav-bar組件和另一個router-outlet,當點擊'a'標籤進行移動時,我只想在User Component中更改路由器插座 –

回答

2

@RouteConfig(..)註釋必須位於類聲明之上。像這樣:

@Component({ 
    selector : "user", 
    ... 
}) 
@RouteConfig([ 
    {path: "/", redirectTo : ['Main']}, 
    {path: "/main", component: Main, name: 'Main', useAsDefault: true}, 
    {path: "/feeds", component: Feeds, name: "Feeds"}, 
    {path: "/notebook/:notebookId", component: Notebook, name: "Notebook"} 
]) 
export class User{ 
    constructor(){ 
    } 
}