如何在不覆盖第二个项目的路由的情况下将 angular2 项目导入另一个 angular2 项目?

How to import an angular2 project inside another angular2 project without overwriting the routes of the second project?

我在将一个 angular2 项目 "project1" 导入另一个 angular2 项目 "project2" 时遇到了一些问题。我希望当 project2 运行时将其重定向到在我的 AppRoutingViewsModule 中指定的 Login2Component,但实际上是重定向到在第一个项目内的路由中指定的 LoginComponent。这是我的路由文件,还有我将第一个项目导入第二个项目的 app.module。

AppRoutingModule 项目 1

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { AppAuthGuard } from "./security/app-auth-guard.component";
import { NoAuthComponent } from '../app/layouts/no-auth/no-auth.component';
import { NotFoundComponent } from '../app/layouts/not-found/notfound.component';
import { LoginComponent } from './login.component';
import { HomeComponent } from './home.component';
import { SsvmnComponent } from './ssvmn.component';

const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent }, 
    { path: 'home', component: HomeComponent,canActivate: [AppAuthGuard],
     children: [
        { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
        { path: 'dashboard', component: DashboardComponent },
        { path: 'ssvmn/:comp', component: SsvmnComponent }
     ]
    },
    { path: 'no-auth', component: NoAuthComponent },
    { path: '**', component: NotFoundComponent }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

AppRoutingViewsModule project2

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Login2Component } from './login.component';

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

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingViewsModule { }

应用模块项目2

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponentsModule } from 'sigma-web';
import { AppRoutingViewsModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Login2Component } from './login.component';

@NgModule({
declarations: [
    AppComponent,
    Login2Component
],
imports: [
    BrowserModule,
    AppComponentsModule,
    AppRoutingViewsModule
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

如果您需要更多信息,请告诉我。 谢谢

解法:

这不是覆盖它。它合并路线,然后选择与路线匹配的第一条路径。所以它基本上忽略了任何看起来重复的路径。如果您在合并的路径集中有通配符路径,则忽略通配符路径之后的所有路径,因为路由器将选择通配符路径 学分:DeborahK

此代码:

declarations: [
    AppComponent,
    LoginComponent
],

合并两个组件的路由。所以你有:

{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent }
{ path: '', redirectTo: 'login2', pathMatch: 'full' },
{ path: 'login2', component: Login2Component }

由于路由顺序很重要,并且路由器总是与第一个匹配项一起使用,因此空(默认)路由将始终转到登录路径。

如果您能提供更多关于您究竟想要完成什么的信息,我们也许能够提供更多关于如何实现它的信息。

根据您要执行的操作,"parent" 路线可能有助于区分两组路线。