Angular2 路由问题-在路由器出口中再次加载应用程序

Question

我的 angular2 路由存在一些我无法弄清楚的问题，当我在浏览器上使用 "localhost:3000" 时，我得到了两个应用程序，应用程序再次加载到我的路由器中 - 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>

应用-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);

login.routing.ts

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);

Answer 1

如果您有一个空路径 ('') 且没有子项的路由，请使用

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

否则路由器会一直搜索子路由。

由于

，您的应用已添加到自身内部

    path: '', component: AppComponent,

AppComponent在Angular启动时已经添加，无需再使用路由器添加。

更新

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' },
];

Answer 2

正如上面评论中提到的，对于默认路由，您可以这样做，而不是 AppComponent

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

Answer 3

我认为您可以在 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: ''定义。

Angular2 路由问题-在路由器出口中再次加载应用程序

Angular2 Routing issue -loading app again inside router-outlet

angular2-routing

angular