通過在 URL 中插入參數在 angular 中路由

Question

假設我有一個在localhost:4200/A由的組件 A，當我在 A 之后傳遞參數時，我也想渲染 A，例如localhost:4200/A/xyz ，無需單擊任何按鈕。

簡單地說，如果我點擊 URL localhost:4200/A/xyz它應該呈現組件 A，這里的xyz是動態的，它可能會發生變化。

Answer 1

您可以使用如下參數添加路由定義：

{
        path: 'A/:id', component: AComponent
    },

然后在AComponent

import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-a',
  templateUrl: './a.component.html',
  styleUrls: ['./a.component.css']
})
export class AComponent{
  data: string;
  constructor(private activatedRoute: ActivatedRoute) {
     this.loadData();
  }

  loadData() {
    this.activatedRoute.paramMap.subscribe(params => {
      this.data= params.get('id');

    });
  }