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

大佬教程收集整理的这篇文章主要介绍了Angular 5.0 学习7：路由实例篇之路由配置，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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 {httpR_540_11845@odulE} from '@angular/http';

import { AppRoutIngModule } from './app-routIng.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    BrowserModule,FormsModule,httpR_540_11845@odule,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:ProductComponent},{path:'**',component:Code404Component}
];

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

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

大佬总结

以上是大佬教程为你收集整理的Angular 5.0 学习7：路由实例篇之路由配置全部内容，希望文章能够帮你解决Angular 5.0 学习7：路由实例篇之路由配置所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。