Позвольте мне сначала получить это право!
У вас есть список предметов, и когда вы нажимаете на него, вам нужно перенаправить на общий маршрут, который отображает детали в отношении идентификатора предмета? Вы ищете способ передать идентификатор элемента в дочерний компонент, не передавая его в качестве параметра маршрута?
Это в основном совместное использование данных между компонентами. Есть 4 способа сделать это.
От родителя к ребенку: обмен данными через Input
Это, вероятно, самый распространенный и простой метод обмена данными. Он работает с помощью декоратора @Input(), позволяющего передавать данные через шаблон.
Дочерние к родителю: обмен данными через ViewChild
ViewChildпозволяет одному компоненту быть введенным в другой, предоставляя родителю доступ к его атрибутам и функциям. Однако одно предостережение заключается в том, что дочерний элемент не будет доступен до тех пор, пока представление не будет инициализировано. Это означает, что нам нужно реализовать хук жизненного цикла AfterViewInit для получения данных от дочернего элемента.
Дочерний элемент к родителю: обмен данными через Output() и EventEmitter
Этот подход идеален, когда вы хотите поделиться изменениями данных, которые происходят в таких вещах, как нажатия кнопок, записи форм и другие пользовательские события.
В родительском объекте вы можете создать функцию для получения сообщения и установитьон равен переменной сообщения.
В дочернем элементе объявите переменную 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")
}
}
Я надеюсь, что этот подход работает.
Удачи!