angular基础知识之路由

基本使用

首先从@angular/router库中导入一些常量。

修改我们的app.module.ts文件，增加以下内容

import { RouterModule, Routes } from '@angular/router';
import { HashLocationStrategy, LocationStrategy, registerLocaleData } from '@angular/common';

增加路由

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
]

修改imports

增加以下内容

RouterModule.forRoot(routes),

修改providers

增加以下内容

{ provide: LocationStrategy, useClass: HashLocationStrategy }

安装路由器

platformBrowserDynamic().bootstrapModule(AppModule)

完整代码

app.module.ts修改后，完整代码如下，请忽略无效内容

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NZ_I18N } from 'ng-zorro-antd/i18n';
import { zh_CN } from 'ng-zorro-antd/i18n';
import { HashLocationStrategy, LocationStrategy, registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzCardModule } from 'ng-zorro-antd/card';
import { SimpleHttpComponent } from './simple-http/simple-http.component';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NzMenuModule } from 'ng-zorro-antd/menu';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';

registerLocaleData(zh);

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
]

@NgModule({
  declarations: [
    AppComponent,
    SimpleHttpComponent,
    AboutComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot(routes),
    HttpClientJsonpModule,
    BrowserAnimationsModule,
    NzDatePickerModule,
    NzButtonModule,
    NzFormModule,
    NzInputModule,
    NzIconModule,
    NzSelectModule,
    NzGridModule,
    NzCardModule,
    NzMenuModule
  ],
  providers: [
    { provide: NZ_I18N, useValue: zh_CN },
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

}

platformBrowserDynamic().bootstrapModule(AppModule)

创建模块

我们创建两个模块，分别是Home、About

修改App模板文件，配置路由

<ul nz-menu nzMode="horizontal">
    <li nz-submenu nzTitle="Home" nzIcon="mail" [routerLink]="['home']"></li>
    <li nz-submenu nzTitle="About" nzIcon="mail" [routerLink]="['about']"></li>
</ul>
<br />
<router-outlet></router-outlet>

<router-outlet>用于展示路由内容，[routerLink]用于配置节点的路由

配置完成后，我们可以访问一下首页

传递参数

我们可能需要路由中传递参数，那么我们继续改造。

修改路由参数

修改about的路由，我们传递一个name属性。

修改后如下

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about/:name', component: AboutComponent },
  { path: 'about', component: AboutComponent }
]

修改模块

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

  route: ActivatedRoute;

  name: string = "";

  constructor(route: ActivatedRoute) {
    this.route = route
    route.params.subscribe(
      param => {
        this.name = param['name']
        console.log(param)
      }
    )
  }

  ngOnInit(): void {
  }

}

修改about模板

<p>about works!</p>
<br>
{{name}}