Angular路由器参数

Question

我的有角网站上有一个组件，可以读取在URL中传递的参数（“ www.mywebsite.com/main?id=value”），是否可以使用户键入“ www.mywebsite.com/main/ gianni”和组件通过参数获取“ gianni”？

Answer 1

尝试一下：

路由器设置：

{
    path: 'main/:id',
    component: MainComponent
},

在您的主要组件中：

  ngOnInit() {
    this.route.params.subscribe(params => {
      const id = params['id'];
      this.loadData(id);
    });
  }

工作示例Stackblitz。

UPDATE

要传递接收到的值，请尝试以下操作：

main.component.html（将接收到的ID传递给联系组件的“ id” @Input属性）

<app-contact [id]="id"></app-contact>

contact.component.ts

import { Component, OnChanges, SimpleChanges, Input } from "@angular/core";

@Component({
  selector: "app-contact",
  templateUrl: "./contact.component.html",
  styleUrls: ["./contact.component.css"]
})
export class ContactComponent implements OnChanges {

  @Input() id;

  constructor() {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes["id"]) {
      console.log(`call backend to get data for [${this.id}]`);
    }
  }

}

新Stackblitz。

Answer 2

是有可能。

const routes: Routes = [
  // routes
  {
    path: 'main',
    component: MainComponent,
    children: [
      {
        path: ':id',
        component: AnotherComponent,
      },
    ],
  },
];

www.mywebsite.com/main / gianna之后参数传递的所有内容都可以在]上获得>

this.route.snapshot.params ['id'];

您可能想看看here