Question

好吧，这个问题可能会被问到很多，但我仍然会问。

我是Typescript / Angular 2的新手。我有两页，比如Page A和Page B. 在页面A我使用api A来请求数据。在检索数据之后，用户可以点击链接/按钮并且他/她通过路由切换到页面B，页面B使用来自页面A的特定数据来从api B请求数据。现在API的工作正常。但我似乎无法从第A页到第B页获取数据。

现在我已经读过Parent / Child / Sibling使用带有obeservable的注射服务，我试过了。但它根本不起作用......

我确保提供程序设置正确，并且可注射服务仅实例化一次。

这是他们的书面规则/方式吗？我的情况与父母/孩子无关。但有点是。

基本上这就是我所做的：服务：

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']);  
    }

}

Page 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 /打字稿的方式不使用localStorage就可以做到。

提前感谢所有帮助，你可以给这个菜鸟。）。

编辑：https://stackblitz.com/edit/angular-p2ucdh

它在这里工作，我必须在我的实际应用中犯了一个严重的错误:(。此时我想我可能会重写整个该死的东西。

实际项目（代码可怕）：https://github.com/EldinZenderink/LittleWeebTS/

Answer 1

我会使用EventEmitter，如下所示：

Page 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);

   }
}

Angular 2 / Typescript在页面之间共享（动态）数据

1 个答案: