在Angular 2中使用router-outlet

下面的僞代碼描述了我的組件樹結構。在Angular 2中使用router-outlet

<app-root> 

<router-outlet name="main"> 

    <Home-component>  

     <a routerLink="about">About</a> // 
     <router-outlet name="home"> </<router-outlet> 

    </Home-component> 

</<router-outlet> 

</app-root>

當用戶點擊「關於」鏈接時，關於組件顯示在「主」路由出口，但我的本意是在「家」的路由器出口，需要修改什麼來顯示它實現這一目標。

「app-root」組件和「Home-component」是根模塊的一部分，「AboutComponent」是特徵模塊的一部分。

根模塊路由如下..

RouterModule.forRoot([ 
    {path:'' , component:LoginComponent }, 
    {path:'home' , component:HomeComponent} 
    ]),

和功能模塊路由如下...

RouterModule.forChild([ 
    {path:'about' , component:AboutComponent } 
])

來源

2016-11-21 refactor

你需要將''''''路由配置成'home'路由的子節點。 – ranakrunal9

首先配置路由，然後嘗試'' –

查看此答案[http://stackoverflow.com/a/40477582/7045253](http://stackoverflow.com/a/40477582/7045253） –

遵循此模式爲您的路線。

export const routes: Route[] = [{ 
     path: '', 
     redirectTo: "login", 
     pathMatch: "full" 
    }, 
    { 
     path: 'login', 
     component: LoginComponent 
    }, 
    { 
     path: 'csvtemplate', 
     component: TemplateComponent, 
     canActivate: ['canActivateForLoggedIn'], 
     children: [{ 
      path: '', 
      redirectTo: 'dashboard' 
     }, 
     { 
      path:'dashboard', 
      component: DashboardComponent 
     }, 
     { 
      path: 'csvtimeline', 
      component: CsvTimelineComponent 
     }, { 
      path: 'addcategory', 
      component: CsvAddCategoryComponent 
     } 
     ] 
    }];

來源

2016-11-21 05:25:45

<router-outlet name="home"> 
    <a routerLink="about">About</a> 
</<router-outlet>

你可以試試這個way.your '關於' 應包括在家裏。

來源

2016-11-21 05:34:47

1：不嵌套<路由器出口> & < /路由器出口> 「路由器出口」之間內容是一種在功能性的I幀的。將內容放在那裏並沒有意義，並且看到了這樣做的零教程。

2：如果您有：<路由器的出口名稱= 「MAIN_OUTLET_ID」>

然後，你需要在app.module.ts

const appRoutes: Routes=[ 
{path: 'main', outlet:MAIN_OUTLET_ID, component:MainComponent}, 
/// ... more routes here ... /// 
] 

@NgModule({ 
... 
imports: [ 
    RouterModule.forChild([ appRoutes ]), 
    /// ... other imports here ... /// 
], 
... 
})

NOTES是這樣的：

1：我在我的例子中使用「MAIN_OUTLET_ID」，因爲它消除了pa的歧義th從路由器插座的id。

來源

2017-11-29 23:22:31

在Angular 2中使用router-outlet

回答

相關問題