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路由问题再次 - 上下应用路由器出口内

回答

相关问题