Angular8：向路由器传递数据

Question

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

Answer 1

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]);

这里这个.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} ]);

这里这个.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}});

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

Answer 2

让我先把这个弄好！

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

这基本上是在组件之间共享数据。有 4 种方法。

Parent 到 Child：通过 Input

共享数据

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

Child 到 Parent：通过 ViewChild

共享数据

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

的数据

Child 到 Parent：通过 Output() 和 EventEmitter

共享数据

当您想要共享发生在按钮点击、表单输入和其他用户事件上的数据更改时，这种方法是理想的选择。

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

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

parent 现在可以订阅由 child 组件输出的这个 messageEvent，然后运行每当此事件发生时接收消息函数。

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

在缺少直接连接的组件之间传递数据时，例如兄弟姐妹、grandchildren 等，您应该共享服务。当您拥有应该始终同步的数据时，我发现 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")
  }

}

我希望这种方法有效。

祝你好运！

Angular8：向路由器传递数据

Angular 8: pass a data to a router

angular-routing

angular