路由

1、命令新建 router项目 加参数 --routing

ng new router --routing

image.pn

image.png

实例

在app-routing.module.ts中引入Home 和Product 两个组件的路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {ProductComponent} from "./product/product.component";

const routes: Routes = [
  {path:'',component:HomeComponent},//配置默认路由
  {path:'product',component:ProductComponent},
];

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

配置404组件 （通配符路由设置）

完整代码

app-routing.module.ts代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {ProductComponent} from "./product/product.component";
import {Code404Component} from "./code404/code404.component";

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

  /* 路由配 通配符路由通常放最后面 */
  {path:'**',component:Code404Component},
];

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

app.module.ts代码

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { Code404Component } from './code404/code404.component';

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

app.component.ts 代码（父组件）

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 {


  /*通过构造方法拿到 router对象 */

  constructor(private router: Router) {

  }

  toProductDetails() {
    /* 通过控制器的navigate方法来路由到product组件上面 */
    this.router.navigate(['/product']);
  }


}

app.component.html 父模板代码

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">
<!--  / 开头的叫根路由   ./ 开头的是子路由 -->
<!--  routerLink [] 里面可以传参数 -->
<!-- (click) 括号里面的是Angular的事件绑定用法  绑定到 组件控制器中的toProductDetails方法 -->

<!-- 路由暂位符号 -->
<router-outlet></router-outlet>

product.component.html 子组件模板之一代码

<p>
  这是一个商品组件
</p>