Router的界面调转

最新推荐文章于 2024-07-31 19:12:07 发布

Phoenix_99

最新推荐文章于 2024-07-31 19:12:07 发布

阅读量170

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/Phoenix_99/article/details/108910433

版权

angular 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

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']);
  }
}