Question

伙计们，我对Angular 6及其组件感到困惑，我创建了一项服务来传达在一个组件中触发的一个事件，并在事件发生时重新加载另一个组件。

服务的代码是：

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject} from 'rxjs';

@Injectable()
export class CommunicationService {

private subject = new BehaviorSubject<boolean>(false);

constructor() { }

public change(){
  this.subject.next(true);
}

public getChange(): Observable<boolean>{
  return this.subject.asObservable();
 }

}

然后是可观察的组件代码：

public subscription: Subscription;

constructor(
private _router: Router,
private _communication: CommunicationService
){}

loginUser()
{
  this._router.navigate(['./loginUser']);
  this.subscription= Observable.interval(500).subscribe(x=> 
  {
   this._communication.getChange().subscribe( resp=>{
    if(resp===true){
        this.ngOnInit();
        this.subscription.unsubscribe();
    }
  })
});

  }

和触发器组件代码：

this._communication.change();

基本上las组件导入Communication Service并调用方法change（）我正在调试代码，并且看起来一切正常，但是即使在调用方法更改的情况下，我在订阅响应中也始终为false ，我做错了什么？

更新已排序我的第一个代码是正确的，问题是将服务导入到提供程序的两个组件中，而不是导入到应用程序模块中。 Ït很好

Answer 1

在服务中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
  <div id='animatediv'>
    grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />
  </div>
</div>

组件：

  private subject= new BehaviorSubject(false);
  curretSubject = this.subject.asObservable();

  constructor() { }

  public changeSubject(fl: boolean) {
    this.subject.next(fl)
   }

触发：

 loginUser()
  {
    this._router.navigate(['./loginUser']);
    this.subscription= Observable.interval(500).subscribe(x=> 
    {
     this._communication.curretSubject.subscribe( resp=>{
      if(resp===true){
          this.ngOnInit();
          this.subscription.unsubscribe();
      }
    })
  });

  }

Answer 2

进行一些更改后，代码如下：

服务：

 private subject= new BehaviorSubject(false);
  currentSubject = this.subject.asObservable();

  constructor() { }

  public change(fl: boolean) {
    this.subject.next(fl);
   }

以0.5的倒数收听组件：

 loginUser()
  {
    this._router.navigate(['./loginUser']);
    this.subscription= Observable.interval(500).subscribe(x => {
     this._communication.currentSubject.subscribe( resp => {
      if(resp===true){
          this.ngOnInit();
          this.subscription.unsubscribe();
      }
    })
  });

}

触发：

public onSubmit(){
          this._userService.signup(this.userAux, 'true').subscribe(
        resp2 => {
          this.token = resp2.token;
          if (this.token.length <= 0) {
            alert('El token no se ha generado');
          } else {
            localStorage.setItem('token', this.token);
            this._communication.change(true);
            this._router.navigate(['./']);
          }
        },
        err => {
          const errorMessage = <any>err;
          if (errorMessage != null) {
            const body = JSON.parse(err._body);
            this.errorMessage = body.message;
          }
        }
}

响应始终为false，执行流程是：首先loginUser（）继续每隔0.5秒订阅Observable Object侦听一次，然后在该Observable.interval继续侦听之后组件触发器调用change（），但值是错误

在2个组件之间分配了Angular 6 Communication Service

2 个答案: