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

Question

当我点击特定的卡片时，它路由到另一个组件，但我想要 数据该特定卡的 也应该传递给另一个组件。这是 stackblitz DEMO.

Answer 1

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

创建共享服务
点击卡片，在服务中设置数据
导航到路由器组件时，通过 getter 或订阅 observable

如果它只是 ID，您可以使用路径参数或查询参数传递它。但是你应该限制自己通过 URL.

传递更多参数

共享服务

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 2

这个回答者在这个 link 找到了解决方案：

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

Answer 3

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

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

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

How to route to another component with the particular selected data

typescript

angular-services

angular

angular7