在Angular 7中,可以使用嵌套路由来实现在模块中嵌套组件的操作。下面是一个使用嵌套路由的示例:
首先,在创建Angular项目时,需要启用路由功能。可以使用以下命令创建一个新的Angular项目:
ng new my-app
然后,进入项目目录并创建一个新的模块和组件:
cd my-app
ng generate module nested-module
ng generate component nested-component
接下来,在app.module.ts
文件中导入NestedModule
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { NestedModule } from './nested-module/nested-module.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: '', component: AppComponent },
{ path: 'nested', loadChildren: () => import('./nested-module/nested-module.module').then(m => m.NestedModule) }
]),
NestedModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在上面的代码中,我们使用RouterModule.forRoot()
方法来配置根路由,并在loadChildren
属性中导入NestedModule
。
然后,创建nested-component
组件的路由配置。在nested-module.module.ts
文件中,导入NestedComponent
并配置路由:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NestedComponent } from './nested-component.component';
@NgModule({
declarations: [NestedComponent],
imports: [
CommonModule,
RouterModule.forChild([
{ path: '', component: NestedComponent }
])
]
})
export class NestedModule { }
在上面的代码中,我们使用RouterModule.forChild()
方法来配置子路由,并在path
属性中指定空路径,并将其映射到NestedComponent
组件。
最后,在nested-component.component.ts
文件中,可以添加一些简单的逻辑和模板代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-nested-component',
template: `
Nested Component
`
})
export class NestedComponent { }
在上面的示例中,我们创建了一个简单的NestedComponent
组件,并在模板中添加了一个标题。
现在,当访问http://localhost:4200/nested
时,将显示NestedComponent
组件的内容。
这就是使用Angular 7的嵌套路由和嵌套在模块中的组件的解决方法。希望对你有所帮助!
下一篇:Angular 7起始页面位置