0

你好我基本上是Angular的新手，在这里我试图从服务中访问一个布尔变量。我已经在服务中声明了一个值为 true 的布尔变量。基于一些逻辑，我将把该服务变量更改为 false。我在几个组件中使用的那个特定变量。所以我面临这样的问题，我分配的初始值是真实的，它会出现在我使用过的所有组件中，但是在更改了未反映在所有组件中的值之后。像这样的服务类：

@Injectable()
export class MyService { 
running: boolean = true;
}

组件 1：

export class FirstComponent {
  constructor(private myService: MyService) { }
  check(){
  this.myservice.running = false;
  }
}

组件 2：

export class SecondComponent implements OnChanges {
      running;
      constructor(private myService: MyService) { }
      ngOnChanges(){
      this.running = this.myService.running;
      console.log('running', this.running);
      }
    }

这就是我将如何更改布尔值并从不同组件中的服务访问。我不确定这是否是正确的方法，请纠正我。

4

3 回答 3

5

一个简单的答案怎么样：

1) 如果您使用的是 Angular v6 或更新版本，那么只需将您的服务更改为以下内容：

@Injectable(providedIn: 'root')
export class MyService { 
   running: boolean = true;
}

2) 搜索您的系统并确保该MyService服务未列在providers任何模块或组件的数组中。

3）更改您的组件以使用吸气剂。正如其他人所说，ngOnChanges唯一适用于@Input属性。

  export class SecondComponent {
      running;
      constructor(private myService: MyService) { }

      get running(): boolean {
        return this.myService.running;
      }
    }

应该这样做！

当服务中的值发生变化时，Angular 的内置变化检测将拾取变化并重新获取值，调用 getter 并将更新后的值提供给模板。

您不需要像这样简单Subject的BehaviorSubject事情。（那些是过度使用恕我直言。）

我在这里有一个非常简单（和类似）的示例：https ://stackblitz.com/edit/angular-simpleservice-deborahk

它使用字符串，但对于布尔值的工作方式完全相同。

于 2019-02-11T16:40:15.390 回答
3

您可以BehaviorSubject在您的服务中使用。然后创建一个主题的ObservablethroughasObservable方法，然后在您想要的任何组件中订阅该 observable。

请注意，ngOnChanges已更改为ngOnInit.

服务中：

private runningSubject: BehaviorSubject<boolean> = new BehaviorSubject(true);
running = this.runningSubject.asObservable();

setRunning = (value: boolean) => {
   this.runningSubject.next(value);
}

在第一个组件中：

export class FirstComponent {
  constructor(private myService: MyService) { }
  check(){
      this.myservice.setRunning(false);
  }
}

第二部分：

export class SecondComponent implements OnInit {
      running;
      constructor(private myService: MyService) { }

      ngOnInit(){
         this.myService.running.subscribe((isRunning) => {
            this.running = isRunning;
             console.log('running', this.running);
         });

      }
}
于 2019-02-11T15:19:45.033 回答
1

首先，您必须确保您的服务是单例的，或者至少在您要连接的每个组件的范围内只有一个实例。实现这一点的最简单方法是在AppModule内部providers 而不是其他任何地方注册您的服务。

第二件事是，即使你的服务改变了它的价值，ngOnChanges也不会无缘无故地被调用。它需要由变更检测器调用，但服务不会以您尝试使用它的方式导致运行变更检测。

取而代之的是，您应该与Observable.

export class TestService {
    private readonly _messageSubject: Subject<boolean>;

    get observable(): Observable<boolean> {
        return this._messageSubject.asObservable();
    }

    constructor() {
        this._messageSubject = new Subject<boolean>();
    }

    sendMessage(value: boolean): void {
        this._messageSubject.next(value);
    }
}

现在，每个注入的组件TestService都可以访问两种方法：

observable这是吸气剂。它从您的服务的主题中返回 observable。 sendMessage(value: boolean)它将您的布尔消息发送给_messageSubject.

如果您想订阅该主题（并访问服务价值的每一次变化），您需要以这种方式使用您的服务：

TestService.observable.subscribe(value => { /* You can access your boolean value here with name "value" */});

请注意，它Subject共享诸如值更改之类的东西，因此方法内部的回调subscribe仅在该值的下一次更改后才会执行（这意味着它将在每次下一次调用sendMessage(value: boolean)方法后调用）。如果您想访问以前的值（这意味着调用之前的最新值subscribe） ，请BehaviorSubject改用）。

于 2019-02-11T15:27:27.353 回答