Угловые данные 2/Typcript (динамические) между страницами

63
7

Хорошо, этот вопрос, вероятно, попросил бросить много, но я все еще собираюсь спросить.

Я новичок в Typcript/Angular 2. У меня есть две страницы, скажем, Страница A и Page B На странице A я использую api A для запроса данных. После получения данных пользователь может щелкнуть по ссылке/кнопке, и он переключится на страницу B через маршрутизацию, на странице B используются данные со страницы A для запроса данных из api B. Теперь материал API работает нормально. Но я просто не могу получить данные со страницы А на страницу В.

Теперь я прочитал, что Parent/Child/Sibling использует инъекционную услугу с сохранением, и я пробовал это. Но это не работает... вообще.

Я убедился, что провайдеры настроены правильно и что инъецируемая услуга создается только один раз.

Это их письменное правило/способ сделать это? Моя ситуация не связана с родителями и детьми. Но любопытное.

В основном это то, что я сделал: Сервис:

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Rx';
import {BehaviorSubject} from 'rxjs/Rx';

@Injectable()
export class ShareService {

public data : Subject<string> = new BehaviorSubject<string>(null);

constructor(){
}
setData(newdata : string){
this.data.next(newdata);
}

clearData(){
this.data.next();
}
}

Страница A:

import {Component, OnInit, OnDestroy} from '@angular/core';
import {ShareService} from '../../services/share.service'
import {Subject} from 'rxjs/Rx';
import 'rxjs/add/observable/of'; //proper way to import the 'of' operator
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
@Component({
selector: 'pagea',
template: '
<button (click)="gotoPageB()" class="item" > click me </button>
'
})
export class CurrentlyAiring {
constructor(private shareService: ShareService, private router: Router){
}
gotoPageB(){
this.shareService.setData("Normally I would send a json string here!");
this.router.navigate(['/pageb']);
}

}

Страница B:

import {Component, OnInit, OnDestroy} from '@angular/core';
import {Router} from '@angular/router';
import {ShareService} from '../../services/share.service'
import {Subject} from 'rxjs/Rx';
import 'rxjs/add/observable/of'; //proper way to import the 'of' operator
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
@Component({
selector: 'pageb',
template: '
<button class="item" > {{somedata}} </button>
'
})
export class CurrentlyAiring {
somedata : string;
constructor(private shareService: ShareService){
this.packlistobserver = this.shareService.data.subscribe((data) => {
if(json !== null){
this.somedata = data;
}
});
}

}

Я только поставил здесь необходимый код, который должен работать, на мой взгляд, но я мог бы оставить что-то важное! Я просто не хотел вводить весь код здесь. Но в основном то, что выше, это то, что я пытаюсь вытащить.

В какой-то момент я просто сдался и начал использовать localStorage для обмена данными, но мне это действительно не понравилось, так как я не могу себе представить, что нет способа Angular 2/typescript сделать это без использования localStorage,

Заранее спасибо за всю помощь, которую вы можете дать этому noob;).

EDIT: https://stackblitz.com/edit/angular-p2ucdh

Он работает здесь, я, должно быть, допустил серьезную ошибку в моем фактическом применении :( В этот момент я думаю, что могу переписать всю чертову вещь.

Фактический проект (с ужасным кодом): https://github.com/EldinZenderink/LittleWeebTS/

спросил(а) 2021-01-25T20:12:50+03:00 4 месяца, 3 недели назад
1
Решение
77

Я бы использовал EventEmitter следующим образом:

Страница B

@Component({
selector: 'pageb',
template: '
<button class="item" > {{somedata}} </button>
'
})
export class CurrentlyAiring implements OnInit {
somedata : string;
constructor(private shareService: ShareService){ }

ngOnInit() {
this.shareService.dataEmitter.subscribe(
(data:string) => this.somedata = data
);
}
}

Страница A

export class CurrentlyAiring  {

constructor(private shareService: ShareService, private router: Router){
}

gotoPageB(){
this.shareService.setData("Normally I would send a json string here!");
this.router.navigate(['/pageb']);
}

}

Класс обслуживания

@Injectable()
export class ShareService {

public dataEmitter = new EventEmitter<string>();

constructor(){
}
setData(newdata : string){
this.dataEmitter.emit(newdata);

}
}

ответил(а) 2021-01-25T20:12:50+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема