html - 如何将参数传递给路由组件

Question

在我当前的 HTML 页面上，有一个“首选项”选项，用户将通过该选项导航到首选项页面。我想从 prev 传递 1 个参数。组件到导航组件。account.component.html -

        <button mat-menu-item [routerLink]="['/preferences']">
          <mat-icon ngClass="material-icons-outlined">home</mat-icon>
          <span>Preferences</span>
        </button>

我想将此html中的accountNumber传递给preferences.component.ts

标签： htmlangulartypescript

Answer 1

假设您的路由器设置为接收参数，并且foo包含您希望传递的参数：

<button mat-menu-item routerLink="preferences/{{ foo }}">

检查@angular/router用于设置路由器的代码：设置路径的位置preferences，更新它以添加参数。如果要命名参数bar：

path: 'preferences/:bar'

在您的preferences页面上，访问bar参数：

import { ActivatedRoute } from '@angular/router';

 constructor(
    private activatedRoute: ActivatedRoute
 ) { }

ngOnInit() {
  this.bar = this.activatedRoute.snapshot.paramMap.get('bar');
}