angular页面跳转

在 Angular 中，可以使用 Angular 路由器来实现页面之间的跳转。首先，需要在 app.module.ts 文件中引入 RouterModule 模块，然后在 app-routing.module.ts 文件中定义路由规则。

例如，要实现从首页跳转到详情页，可以在 app-routing.module.ts 文件中定义如下路由规则：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { DetailComponent } from './detail.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'detail/:id', component: DetailComponent },
];

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

其中，`path` 表示页面的 URL 路径，`component` 表示对应的组件。

然后在 HomeComponent 中设置一个链接，点击链接跳转到详情页：

<a [routerLink]="['/detail', item.id]">查看详情</a>

其中，`routerLink` 指令用于设置链接，`['/detail', item.id]` 表示跳转到详情页，并传递一个参数 `id`。

最后，在 DetailComponent 中可以通过 ActivatedRoute 服务获取传递过来的参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-detail',
  template: `
    <h2>详情页</h2>
    <p>ID: {{ id }}</p>
  `
})
export class DetailComponent implements OnInit {
  id: number;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.id = +this.route.snapshot.paramMap.get('id');
  }
}

其中，`ActivatedRoute` 服务用于获取当前路由参数，`snapshot.paramMap.get('id')` 表示获取参数 `id` 的值。