Router的界面调转

1，app Html

<a [routerLink]="['/']">主页</a> <a [routerLink]="['/product']">商品详细</a> <input type="button" value="商品目录" (click)="toProductDetail()"> <router-outlet></router-outlet>

 

2.app-routing.modules.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 { }

 

3.app.component.ts

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'route'; constructor(private router: Router) { } // tslint:disable-next-line:typedef toProductDetail(){ this.router.navigate(['/product']); } }