1

好吧，这个问题可能被问了很多，但我还是要问。

我是 Typescript/Angular 2 的新手。我有两个页面，比如说页面 A 和页面 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']);  
    }

}

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 来共享数据，但我并不是很喜欢它，因为我无法想象如果不使用 localStorage 就没有 Angular 2/typescript 的方式来做到这一点.

在此先感谢您为这个菜鸟提供的所有帮助；）。

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

它在这里工作，我一定在我的实际应用程序中犯了一个严重的错误:(。在这一点上，我想我可能会重写整个该死的东西。

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

4

1 回答 1

1

我会使用 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);

   }
}
于 2017-10-16T20:55:15.860 回答