Angular 5.0 学习7:路由实例篇之路由配置

zhiyu

1.通过超链接导航

使用一下命令新建一个项目:

ng new router --routing  // 不加-routing参数,可以在app.module.ts配置路由

生成项目时添加了–routing参数后,会多生成一个app-routing.module.ts文件:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path:'',
    children:  []
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers:[]
})
export class AppRoutingModule { }

在app.module.ts中也会多引入AppRoutingModule:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在app.component.html中会加入router-outlet

<h1>
  {{title}}
</h1>
<router-outlet></router-outlet>

新生成两个组件ng g component home,ng g component product

然后修改app-routing.modules.ts,为了保证通用性,这里写地址的时候不要在前面加上/

const routes: Routes = [
  {path:'',component:HomeComponent},
  {path:'product',component:ProductComponent}
];

修改app.component.html

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">商品详情</a>

<router-outlet></router-outlet>

此时,当你访问localhost:4200的时候显示的是home works!,当你点击商品详情,会显示product works!并且地址变成了localhost:4200/product

2.通过触发事件导航

修改app.component.html和app.component.ts

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">
<router-outlet></router-outlet>
import { Component } from '@angular/core';
import {Router} from "@angular/router";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(private router: Router){}

  toProductDetails(){
    this.router.navigate(['/product']);
  }
}

运行程序,点击按钮,下边就会显示product works!

3.配置404页面路由

新生成一个组件ng g component code404
修改app-routing.module.ts

const routes: Routes = [
  {path:'',component:HomeComponent},
  {path:'product',component:ProductComponent},
  {path:'**',component:Code404Component}
];

当访问一个不存在的路径时会显示code404 works!

显示路由是从上往下匹配地址,如果把{path:’**’,component:Code404Component}放到前面不管访问那个页面都会显示code404了。所以具有通用性的路由要放到最后边。

阅读 4.2k

Angular 5.0学习之路
Angular 5.0学习之路,整理一下最近学习ng5的笔记和经验。

There are two ways of constructing a software design: One way is to make it so simple that there ...

221 声望
127 粉丝
0 条评论

There are two ways of constructing a software design: One way is to make it so simple that there ...

221 声望
127 粉丝
文章目录
宣传栏