是伍尚金哇_v

angular路由导航配置

电脑版发表于:2020/3/23 15:35

开发工具:VSCode

打开终端输入命令创建crisis-list和hero-list组件

ng generate component crisis-list
ng generate component hero-list

再app文件夹下面自动创建了两个组件

要使用路由器,必须先注册来自@angular/route包中的RouterModule,定义一个路由数组appRoutes并且把它传给RouterModule.forRoot()方法。他会返回一个模块,其中包含配置好的Router服务,以及路由库里所需要的提供包这些。一旦启动了应用,Router就会根据当前的浏览器URL地址进行首次导航访问。在app.module.ts文件里

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { HeroListComponent } from './hero-list/hero-list.component';
import {RouterModuleRoutesfrom '@angular/router';
import { NotFoundComponent } from './not-found/not-found.component';


const appRoutesRoutes = [
  { path: 'crisis-center'component: CrisisListComponent },
  { path: 'heroes'component: HeroListComponent },
  { path: '',   redirectTo: '/heroes'pathMatch: 'full' },
  { path: '**'component: NotFoundComponent },
];

@NgModule({
  declarations: [
    AppComponent,
    CrisisListComponent,
    HeroListComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

路由出口,angular的路由出口需要依赖于


<router-outlet></router-outlet>      

在app.component.html编写相关的html代码 并且超链接的点击事件

<h1>父页面</h1>
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
  <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<!--路由出口-->
<router-outlet></router-outlet>   

routerLink属性的后面值是和app.module.ts里得路由规则进行匹配跳转相应的路径页面,routerLinkActive属性在这篇文章不做解释  不影响


现在来说说配置路由规则,回到app.module.ts文件里面

path: 'crisis-center'component: CrisisListComponent

path表示url显示的路由,例如:http://localhost:4200/crisis-center,component表示组件名称,指到那个组件就跳转哪个组件模板(页面)


path: '',   redirectTo: '/heroes'pathMatch: 'full'

path为'' 表示不输入规则进行访问时会匹配到此规则,例如http://localhost:4200,但hi为了避免没有组件可访问,加上redirceTo重定向路由,意思是如果在地址栏直接输入http://localhost:4200他会默认访问http://localhost:4200/heroes


path: '**'component: NotFoundComponent

这个路由规则比较特殊,当你输入错的路由,全部没有匹配到时就会访问到此规则,通常拿来做404-not-find-page页面


注意三种路由规则依次排序顺序,不能乱,

const appRoutesRoutes = [
  { path: 'crisis-center'component: CrisisListComponent },
  { path: 'heroes'component: HeroListComponent },
  { path: '',   redirectTo: '/heroes'pathMatch: 'full' },
  { path: '**'component: NotFoundComponent },
];

看效果:

关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢