在Angular 7中,使用路由的步骤组件工作的解决方法如下所示:
npm install -g @angular/cli
然后,通过以下命令创建一个新的Angular项目:
ng new my-app
HomeComponent
和AboutComponent
。通过以下命令创建这两个组件:ng generate component home
ng generate component about
这将在src/app
目录下创建两个组件文件夹。
src/app/app.module.ts
文件中,导入RouterModule
和Routes
,并配置路由。更新文件如下:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这里定义了两个路由:空路径对应HomeComponent
,about
路径对应AboutComponent
。
src/app/app.component.html
文件中,使用router-outlet
标签来渲染路由组件。更新文件如下:Angular 7 - 使用路由的步骤组件工作
这里使用routerLink
指令来导航到不同的路由。
ng serve
然后在浏览器中打开http://localhost:4200
,您将看到应用程序的主页。点击导航栏中的"About"链接,将会切换到About页面。
这就是使用Angular 7中路由的步骤组件工作的解决方法。希望对你有所帮助!