要实现Angular路由链接导航到简单页面而不是页面/页面,可以使用Angular的路由配置和routerLink
指令。
首先,在app-routing.module.ts
文件中,确保已引入路由模块,并配置路由信息。例如,假设要导航到名为SimplePageComponent
的简单页面。路由配置如下:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SimplePageComponent } from './simple-page/simple-page.component';
const routes: Routes = [
{ path: 'simple', component: SimplePageComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
接下来,在导航链接处使用routerLink
指令来导航到简单页面。例如,可以在导航菜单中添加一个链接到SimplePageComponent
的导航项:
然后,在SimplePageComponent
组件中,可以添加简单的页面内容,以便显示导航成功的页面。例如:
import { Component } from '@angular/core';
@Component({
selector: 'app-simple-page',
template: '这是一个简单页面
'
})
export class SimplePageComponent { }
最后,确保将AppRoutingModule
添加到AppModule
的imports
数组中,以启用路由导航:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SimplePageComponent } from './simple-page/simple-page.component';
@NgModule({
declarations: [
AppComponent,
SimplePageComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当点击导航菜单中的“简单页面”链接时,将导航到SimplePageComponent
组件,并在页面上显示“这是一个简单页面”。
上一篇:Angular 路由考虑因素
下一篇:Angular 路由链接问题