Angular2路由問題再次 - 上下應用路由器出口內

有一些問題，我的angular2路由我無法弄清楚，我採取「本地主機：3000」我的瀏覽器我得到兩個應用程序，再次應用程序被加載我的router-outlet.Can有人可以幫我解決這個問題？

app.routing.ts

import { ModuleWithProviders } from '@angular/core'; 
import { RouterModule, Routes, CanActivate } from '@angular/router'; 
import { AuthGuard } from './services/auth-guard.service'; 
import {AppComponent} from './app.component'; 
const routes: Routes = [ 
{ 
     path: '', component: AppComponent, 
     children:[ 
      { path: 'login',loadChildren: './components/login/login.module#LoginModule'}, 
      { path: 'reset-password', loadChildren: './components/password-reset/reset-password.module#ResetPasswordModule'}, 
      { path: 'app',loadChildren: './components/app-holder/app-holder.module#AppHolderModule' }, 
     ] 
} 
]; 

export const Routing: ModuleWithProviders = RouterModule.forRoot(routes);

app.component.html

<header></header> 
<div class="app-container"> 
    <router-outlet></router-outlet> 
</div> 
<footer></footer>

APP-holder.routing.ts

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { AppHolderComponent } from './app-holder.component'; 

const routes: Routes = [ 
    { 
     path: '', component: AppHolderComponent 
    } 
]; 

export const AppHolderRoutes: ModuleWithProviders = RouterModule.forChild(routes);

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { LoginComponent } from './login.component'; 

const routes: Routes = [ 
    { path: '', component: LoginComponent } 
]; 

export const LoginRoutes: ModuleWithProviders = RouterModule.forChild(routes);

密碼reset.routing.ts

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { PasswordResetComponent } from './reset-password.component'; 

const routes: Routes = [ 
    { path: '', component: PasswordResetComponent } 
]; 

export const LoginRoutes: ModuleWithProviders = RouterModule.forChild(routes);

來源

2017-10-07 RemyaJ

什麼是appHolderComponent？發佈代碼 – Sajeetharan

appholder只是您登錄時看到的一個組件，到目前爲止還沒有任何內容。問題是我可以看到兩個標題。 – RemyaJ

只需將默認組件更改爲登錄而不是appcomponent， – Sajeetharan

如果你有一個空路徑（''）和沒有孩子的路線，使用

path: '', component: AppHolderComponent, pathMatch: 'full'

否則路由器保持搜索子路由。

您的應用中添加本身由於

path: '', component: AppComponent,

AppComponent已添加角時，被自舉，不必再使用路由器添加它。

更新

const routes: Routes = [ 
    { path: 'login',loadChildren: './components/login/login.module#LoginModule'}, 
    { path: 'reset-password', loadChildren: './components/password-reset/reset-password.module#ResetPasswordModule'}, 
    { path: 'app',loadChildren: './components/app-holder/app-holder.module#AppHolderModule' }, 
];

來源

2017-10-07 14:04:20

如果我從app.routing中刪除路徑：''，component：AppComponent，則出現此錯誤 - 未處理的Promise拒絕：Route' 」。必須提供以下內容之一：component，redirectTo，children或loadChildren; – RemyaJ

我想它是因爲登錄和應用程序持有者模塊被延遲，他們必須是兒童嗎？ – RemyaJ

你的'login'，''reset-password'和'app'路由需要成爲根路由。你可以請添加路線，因爲你現在有你的問題？ –

正如在評論中提及上面的，因爲你可以做這樣的默認路由，而不是AppComponent

來源

2017-10-07 14:06:31 Sajeetharan

應用程序持有者已延遲，我該怎麼做？ – RemyaJ

我想你可以重新安排你的路線定義app.routing.ts並嘗試。就像這樣：

const appRoutes: Routes = [ 
       { path: '', component: HomeComponent, pathMatch: 'full'}, 
       { path: 'login',loadChildren: './components/login/login.module#LoginModule'}, 
       { path: 'reset-password', loadChildren: './components/password-reset/reset-password.module#ResetPasswordModule'}, 
       { path: 'app',loadChildren: './components/app-holder/app-holder.module#AppHolderModule' }, 

    ];

相反的AppComponent，您可以創建一個名爲HomeComponent一個佔位符組件和路線定義使用它來代替AppComponent。因爲默認情況下AppComponent被用作main.ts文件中的引導組件。

或者可以創建一個名爲HomeModule另一個模塊，並在app.module.ts文件中導入並定義path: ''在模塊路由定義。

來源

2017-10-07 14:26:31 asmmahmud

Angular2路由問題再次 - 上下應用路由器出口內

回答

相關問題