Question

当我单击特定的卡时，它正在路由到另一个组件，但是我还希望该特定卡的数据传递给另一个组件。这是 DEMO 堆栈炸弹。

Answer 1

您可以使用共享服务来实现解决方案

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

@Injectable()
export class DataService {

  selectedCard;
  constructor() { }

  public setSelectedCard(data) {
    this.selectedCard = data;
  }

  public getSelectedCard() : any {
    return this.selectedCard;
  }

}

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  contact
  constructor(private dataService: DataService) { }

  ngOnInit() {

    this.contact = this.dataService.getSelectedCard();
  }

}

list.component.ts

export class ListComponent implements OnInit {
  contacts = [];
  constructor(private myService: ContactService, private router : Router, private dataService: DataService) {}

   ngOnInit() {
    this.myService.getContacts()
      .subscribe((res :[]) => this.contacts = res);
  }

  onCardClick(index) {

    this.dataService.setSelectedCard(this.contacts[index]);
    this.router.navigate(['/home']);
  }

}

list.component.html 调用索引为

的onCardClick（）

<mat-card (click)="onCardClick(i)" >

这里是forked stackblitz solution

Answer 2

唯一的方法是使用setters和getters或observables通过共享服务进行共享。

创建共享服务
点击该卡，在服务中设置数据
导航到路由器组件时，请通过getter或订阅可观察的内容从共享服务中读取它

如果仅是ID，则可以使用path参数或query参数传递它。但是您应该限制自己不要通过URL传递更多参数。

SharedService

export class SharedService {
  public $cardDataSubject;

  constructor() {
    this.$cardDataSubject = new Subject();
  }

  setCardDetails(cardDetails) {
    this.$cardDataSubject.next(cardDetails);
  }
}

在子组件中，您可以订阅

constructor(private sharedService: SharedServic) {
    this.$cardDataSubject.subscribe(cardDetails => this.cardDetails = cardDetails);
}

Answer 3

此ananser在此链接上找到了解决方案： How do I pass data to Angular routed components?

最佳解决方案：通过服务使用第三种方法。

如何使用特定的所选数据路由到另一个组件

3 个答案: