Как передать данные объекта строки таблицы из одного компонента в другой компонент - PullRequest
Новая
       7

Как передать данные объекта строки таблицы из одного компонента в другой компонент

1 голос
/ 24 февраля 2020

У меня есть таблица соответствия для одного компонента, и после нажатия на определенную строку эта информация должна отображаться для другого компонента. Я могу консоль информации на моей первой странице, но не могу переместить эту информацию на другую страницу. Например, "console.log (row)". Вся информация находится в параметре "строка"

И как я могу напечатать ее на моей новой странице компонента с форматом ключа и значения

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

Добавить функцию щелчка в строке: 

<tr *ngFor="let item of list" (click)="navigate(item)">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
    </tr>

Используйте эту функцию для перехода к другому маршруту, проходящему через состояние: 

navigate(item): void {
    this.router.navigate(['/item'], {state: {item: item}});
  }

Извлечение состояния с помощью history в другой компонент (импорт не требуется): 

ngOnInit() {
    console.log(history.state);
  }
0 голосов
/ 24 февраля 2020

Вы можете использовать декоратор @Input. Ниже приведен минимальный пример, а - это документы. 

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <p>{{masterName}}</p>
  `
})
export class HeroChildComponent {
  @Input('master') masterName: string; // extracts master attribute
}

и родительский компонент 

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

@Component({
  selector: 'app-hero-parent',
  template: `
    <app-hero-child
      [master]="master"> // send string to child component
    </app-hero-child>
  `
})
export class HeroParentComponent {
  master = 'Master';
}
...