Любой другой способ установить связь между компонентами angular 5
Я установил следующие способы построения связи между компонентами.
1.декоратор @input и @output (но только для родительского ребенка) для родственных компонентов
2.создание службы с помощью метода получения и установки (но ограничение в том, что если мы обновим страницу, на которой мы используем данные из службы, данные станут пустыми)
3. использование файлов cookie (ограничения: если я сохраняю массив, он сохраняется в виде строк. Иногда бывает сложно вернуть исходный тип данных)
4. с использованием локального хранилища
Есть ли другие способы связи между двумя компонентами, кроме этих. все вышеперечисленное я уже использовал. Предложите мне еще способы.
5. Я применил следующий способ, используя тема. Но не знаю, почему я не получаю результат
Услуга
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class MessageService {
private subject = new Subject<any>();
sendMessage(message: string) {
this.subject.next({ text: message });
}
clearMessage() {
this.subject.next();
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
}
компонент получения
import { MessageService } from '../services/message.service';
import { Subscription } from 'rxjs';
export class detailComponent implements OnInit, OnDestroy {
message: any;
subscription: Subscription;
constructor(private messageService: MessageService) {
this.subscription = this.messageService.getMessage().
subscribe(message => {
this.message = message;
console.info("Message");
console.info(this.message);
});
}
Отправляющий компонент
import { MessageService } from '../services/message.service';
export class AlertComponent implements OnInit {
sendMessage(): void {
// send message to subscribers via observable subject
this.messageService.sendMessage('Message from alert Component to
details Component!');
}
clearMessage(): void {
// clear message
this.messageService.clearMessage();
}
}
Но этот код не работает.
Думаю, вы охватите почти все, что можно заметить, рядом с localStorage есть sessionStorage. Он работает так же, но привязан только к вкладке, а не ко всему браузеру.
Вы также можете использовать EventEmitter в Услуга и использовать его в своих компонентах для испускают и подписываться для него.
@Swoox, да но последний пользующийся услугами не работает. Помогите мне в этом. Благодарность
@SarthakAggarwal Не могли бы вы дать мне пример кода, если это возможно.
«Но этот код не работает» подписаться на услугу в ngOnInit, а не в коснтрукторе. (некоторое время назад я сделал простой пример в stackblitz.com/edit/angular-rrv6hs)
Спасибо .. Я реализовал это ..
Ответы 4
Вы также можете использовать EventEmitter в службе и использовать его в своих компонентах для отправки и подписки на него.
Объявите свой EventEmitter в messaging.service.ts
@Injectable(){
export class MessagingService{
message : EventEmitter<String> = new EventEmitter<String>();
}
Используйте этот EventEmitter для отправки в отправляющем компоненте
send.component.ts
export class SendingComponent implements OnInit(){
constructor(private mService : MessageService) {}
ngOnInit(){
this.mService.message.emit('This is my message');
}
}
Используйте этот EventEmitter для подписки в получающих компонентах
export class ReceiveComponent implements OnInit(){
constructor(private mService : MessageService) {}
ngOnInit(){
this.mService.message.subscribe(message=>{ console.info(message) });
}
}
Насколько я знаю, вы упомянули все 2 способа связи между компонентами. Также вы можете использовать параметры роутера. если вы используете маршрутизацию. Но ограничения вашего второго аргумента можно избежать.
2. создание службы с помощью метода получения и установки (но ограничение в том, что если мы обновим страницу, на которой мы используем данные из службы, данные станут пустыми)
Чтобы не отбрасывать данные после обновления дочернего элемента, вы можете использовать BehaviorSubject для передачи данных. при обновлении он выдаст последние сохраненные данные.
это способ сделать это,
В вашем сервисе сначала импортируйте BehaviorSubject
import { BehaviorSubject } from "rxjs/BehaviorSubject";
затем внутри класса обслуживания
behaviralSubject = new BehaviorSubject<any[]>(['']);
exampleBehaviralSubject = this.behaviralSubject.asObservable();
setValues(val: any[]) {
this.behaviralSubject.next(val);
}
И в компоненте, на который вы хотите подписаться на эту услугу,
сначала внедрите компоненты в OnInit, импортируйте свой сервис как testService
затем переопределите ngOnInit ()
ngOnInit() {
testServce.exampleBehaviralSubject.subcribe(
dataArray => {
console.info(dataArray)
// your code goes here
}
)
}
ваше первое значение будет [''] пустым строковым массивом. затем используйте testService.setValues (dataArray) для отправки данных. это отправит данные всем компонентам, которые подписаны на testService, при инициализации (или обновлении) компонента будут выданы последние данные в behaviorSubject.
не могли бы вы дать мне образец кода поведения предмета. Поскольку я попробовал неработающую тему, возможно, я что-то упустил. это будет большим подспорьем. Благодарность
Нет, и здесь, когда я обновляю страницу, данные становятся пустыми. Как решить эту проблему.
Обновление страницы не может быть решено с помощью этого метода. Вы хотите сохранить свои данные в куки или в локальной памяти для этого (я еще не сделал этого). этот метод работает только при обновлении или воссоздании дочернего компонента, но не при обновлении приложения.
как и декоратор ввода и вывода, когда мы обновляем компонент приема данных, переданные данные остаются такими, какие есть. Если я обновлю компонент, в котором я подписываюсь на тему, я хочу, чтобы мои данные были там, как есть. Является ли это возможным?
где вы предоставляете эту услугу в корне или другом модуле?
providedIn: 'root'
Если предоставить в корневом сервисе одноэлементный, это должно сработать. behaviorSubject отправляет последние данные, которые у него есть.
Any other way to establish communication between components
Использование инструмента для управления состоянием приложения.
В Angular самый известный из них - NgRx: https://github.com/ngrx/platform.
Альтернативой NgRx является Akita, новинка для разработчиков Angular: https://github.com/datorama/akita
Эта библиотека в основном вдохновлена Redux, который очень известен в мире ReactJS.
Вам нужна библиотека государственного управления. Очень рекомендую Акиту. Это просто и поставляется со всем, что вам нужно, из коробки, например, хранилищем сущностей, инструментами для разработки, плагинами и многим другим. Проверить это:
А как насчет библиотеки государственного управления github.com/ngrx/platform?