在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中路由的步骤组件工作的解决方法。希望对你有所帮助!