如何使用来自不同模块的组件作为路由声明中的主要组件

Question

Angular 新手，非常感谢您的耐心等待。

我想达到什么目的？

• 我正在尝试在我的 auth 模块中使用该组件（即登录 component) 作为路由 myapp.com/login 的基础组件
• 假设在 **app.component.html 中嵌入 可以正常工作，那么当我将其放入 app-routing.module.ts 时应该也是如此

app-routing.module.ts 的代码

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

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '/login', component: LoginComponent}, //Cannot find name 'LoginComponent'.ts(2304)
];

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

我的组件结构

• 我有一个身份验证模块，其中包含登录和注册组件
• 以及基本的 ng-cli 生成的应用程序结构。

authmodule 的代码 auth.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';



@NgModule({
  declarations: [RegisterComponent, LoginComponent],
  exports:[RegisterComponent,LoginComponent],
  imports: [
    CommonModule
  ]
})
export class AuthModule { }

app.module.ts 的代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import {AppCommonsModule} from './app-commons/app-commons.module';
import {AuthModule} from './auth/auth.module'

import { HomeComponent } from './home/home.component'
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AppCommonsModule,
    AuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您不能直接引用声明为 AppRoutingModule 中其他模块的一部分的组件。您必须通过创建 AuthRoutingModule 将 LoginComponent 的路由委托给 AuthModule。然后在 AppRoutingModule 中，为login 创建一个路由，并将控制权传递给 AuthRoutingModule。

按照以下步骤为 LoginComponent 创建路由。

1. 创建一个名为 AuthRoutingModule 的新文件，并在此文件中包含 AuthModule 中组件的路由。

auth-routing.module.ts

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

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

const authRoutes: Routes = [
  {
    path: '', // considering LoginComponent as the root path for AuthModule. This will be referred as 'login' from AppRoutingModule
    pathMatch: 'full', // this is important to correctly match the empty path
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(authRoutes)],
  exports: [RouterModule]
})
export class AuthRoutingModule {}

注意这里使用了forChild() 方法。 RouterModule.forRoot() 应该只使用一次，并且最好在 AppRoutingModule 中。 RouterModule.forChild() 用于为其他子模块创建路由（因此是 forChild 名称）。

1. 在 AuthModule 文件中导入 AuthRoutingModule。
2. 如下修改您的 AppRoutingModule 文件。

app-routing.module.ts

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

import { HomeComponent } from './home.component';

const authRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full', // this is important to correctly match the empty path
    component: HomeComponent
  },
  {
    path: 'login',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
    // now this will refer the root path of AuthRoutingModule
  },
  // Redirect all invalid URLs to HomeComponent
  {
    path: '**',
    redirectTo: '/'
  }
];

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

如上面代码sn-p所示，如果你想从一个特定路由的子模块加载一个组件，AppRoutingModule应该使用loadChildren属性将控件重定向到子模块。

4. 您已经在 AppModule 文件中导入了 AppRoutingModule 和 AuthModule。只需确保先加载 AppRoutingModule，然后再加载其他带有路由的子模块（即，在您的情况下为 AuthModule）。

5. 如果您想要延迟加载，请从 AppModule 导入中删除所有子模块（带有路由）。更多关于延迟加载here。

有关子模块路由的更多信息，请参阅Angular official docs。

我还创建了一个示例stackblitz app for demo purposes。

Answer 2

您在路由文件中引用了LoginComponent，但没有导入它。

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

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '/login', component: LoginComponent}, //Cannot find name 'LoginComponent'.ts(2304)
];

添加导入语句，我相信它应该可以修复打字稿错误。

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