Angular 8：将数据传递给路由器

Question

我有一个包含产品列表的页面，我想将产品 id 传递给 product/:id 路由器（我不想从路由器 url 解析它）。我有什么选择？我可以为路由器组件添加Input() 之类的东西吗？

Answer 1

让我先解决这个问题！

您有一个项目列表，当您单击一个时，您需要重定向到显示参考项目 ID 的详细信息的一般路线？您正在寻找一种将项目 id 传递给子组件而不将其作为路由参数传递的方法？

这基本上是在组件之间共享数据。有 4 种方法可以做到这一点。

父母对孩子：通过Input共享数据

这可能是最常见、最直接的数据共享方法。它通过使用 @Input() 装饰器来允许通过模板传递数据。

孩子到父母：通过ViewChild共享数据

ViewChild 允许将一个组件注入另一个组件，从而使父组件可以访问其属性和功能。然而，需要注意的是，在视图初始化之前，子级将不可用。这意味着我们需要实现AfterViewInit 生命周期钩子来接收来自孩子的数据。

孩子与父母：通过Output() 和EventEmitter 共享数据

当您想要共享发生在按钮点击、表单条目和其他用户事件等事件上的数据更改时，此方法非常理想。

在父级中，您可以创建一个函数来接收消息并将其设置为等于消息变量。

在子级中，使用 Output 装饰器声明一个 messageEvent 变量，并将其设置为新的事件发射器。然后创建一个名为sendMessage 的函数，该函数在此事件上调用emit，并带有您要发送的消息。最后，创建一个按钮来触发这个功能。

父组件现在可以订阅子组件输出的messageEvent，然后在该事件发生时运行接收消息函数。

不相关的组件：与服务共享数据（推荐）

在缺少直接连接的组件之间传递数据时，例如兄弟姐妹、孙辈等，您应该使用共享服务。当您拥有应该始终同步的数据时，我发现 RxJS BehaviorSubject 在这种情况下非常有用。

以下是最后一种方法的示例！

shared-service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

---

parent.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    //subscribing to the updated data set
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}

---

sibling.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    // triggering the shared service method
    this.data.changeMessage("Hello from Sibling")
  }

}

我希望这种方法有效。

祝你好运！

Answer 2

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

constructor(private router: Router) { }

用作路径变量

在 app.routes.ts 中

{ path: 'product/:id' , component: ProductComponent}

如何在html文件中使用

<a [routerLink]="['/product', product.id ]">Your link<a>

这里product.id是你要传递的值

如何在打字稿文件中使用

this.router.navigate(['/product', this.product.id]);

这里 this.product.id 是你要传递的值

用作可选参数

在 app.routes.ts 中

{ path: 'product' , component: ProductComponent}

如何在html文件中使用

<a [routerLink]="['/product', { id: product.id} ]">Your link<a>

这里product.id是你要传递的值

如何在打字稿文件中使用

this.router.navigate(['/product',{ id : this.product.id} ]);

这里 this.product.id 是你要传递的值

用作查询参数

在 app.routes.ts 中

{ path: 'product' , component: ProductComponent}

如何在html文件中使用

<a [routerLink]="['/product']" [queryParams]="{ id: product.id}">Your link<a>

这里product.id是你要传递的值

如何在打字稿文件中使用

this.router.navigate(['/product'], { queryParams: { id : this.product.id}});

这里 this.product.id 是你要传递的值