Angular2路由问题加载应用程序再次在路由器插座内

Question

我的angular2路由存在一些问题，当我采取＆＃34; localhost：3000＆＃34;在我的浏览器上我得到两个应用程序，再次将应用程序加载到我的路由器插座中。有人可以帮我解决这个问题吗？

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

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' }, ]; ，无需使用路由器再次添加它。

<强>更新

$rooms = Room::with('amenities')
->withCount('amenities', function($query){
  $query->whereIn('id', [2, 3]);
})
->where('amenities_count', 2)
->get()

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: ''。