Question

我正在使用角度2.我提供了一项服务，我想执行一项简单的任务，就像我在两个组件中制作服务对象一样。在哪里，component1将bool值更改为true，我希望在component2中使用该值。反之亦然。

我的服务是：

import { Injectable } from '@angular/core';


@Injectable()
export class JwtService {

   appStatus:boolean=false;


  setStatus(value){
    debugger;

    this.appStatus = value;

  }
  getStatus(){


    return this.appStatus;
  }



}

在我的组件1：

import { Component } from '@angular/core';

import { JwtService} from '../shared/services/jwt.service';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [JwtService ]
})
export class AppComponent {





appStatus: boolean = false; 
 constructor( private jwtService:JwtService) { }


 public Func() :any{


      this.jwtService.setStatus(false);


    }

}

在我的组件2：

import { Component, OnInit } from '@angular/core';
import { JwtService} from '../services/jwt.service'
@Component({
  selector: 'layout-header',
  templateUrl: './header.component.html',
  providers: [JwtService]
})

export class HeaderComponent implements OnInit {
    appStatus: boolean ; 
  constructor(  private jwtservice:JwtService

  ) { 
this.appStatus=jwtservice.getStatus();

   }

 setout()
{



  this.jwtservice.setStatus(true);


}



}

只想更改服务时显示的appstatus值。

Answer 1

您似乎对RxJS不是很熟悉。您可以将appStatus转换为您可以订阅的Subject。基本上，您将回调传递给Subject，每次值更改时都会调用该回调。 Subject.next(value)用于设置新值。

注意：必须在组件被销毁时取消订阅主题。这样可以防止内存泄漏和未定义的行为。

服务：

@Injectable()
export class JwtService {
   appStatus = new BehaviorSubject<boolean>();
}

两个组成部分：

export class HeaderComponent implements OnInit, OnDestroy {
  private _sub: Subscription;
  private _currentStatus: boolean = false;
  constructor(private service:JwtService) {}
  ngOnInit() {
    // We make subscription here. Behavior subject means that you will receive latest value on subscription and every next value when it is changed.
    this._sub = this.service.appStatus.subscribe((status) => this._currentStatus = status);
  }
  ngOnDestroy() {
    // IMPORTANT: UNSUBSCRIBE WHEN COMPONENT IS DESTROYED
    this._sub.unsubscribe();
  }
  setStatus(status: boolean) {
    this.service.appStatus.next(status);
  }
}

Answer 2

您可以使用behaviourSubject，可以找到参考here。

您应该做的是appStatus作为behaviourSubject在您的服务中。然后，您将从component2订阅其值。现在，当您在component1中设置其状态时，component2将检测更改的值，并且将触发component2中订阅内的函数。

Answer 3

不是在service级别提供component，而是在module级别提供。这样，您的service将成为单身，并且在component处更改值将反映在另一个component中。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
  ],

  providers: [JwtService],

  exports: [],
  bootstrap: [AppComponent]
})

获取bool数据的更新值

3 个答案: