服务中的值更改后更新组件视图

Question

我有一个带有 _toolbarTitle 的工具栏，我想在工具栏标题服务更改 title 后更新它。使用 setToolbarTitle() 导航到不同的页面后，它会发生变化。我试过使用 observables 但很难正确实现它。

toolbar-title.service.ts

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

@Injectable({
  providedIn: 'root',
})
export class ToolbarTitleService {
  title: string = 'toolbarTitle';
  constructor() {}

  setToolbarTitle(title) {
    this.title = title;
  }

  getToolbarTitle() {
    return this.title;
  }
}

toolbar.component.ts

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { ToolbarTitleService } from '../services/toolbar-title.service';

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ToolbarComponent implements OnInit {
  _toolbarTitle = '';
  constructor(private toolbarTitle: ToolbarTitleService) {}

  onClick() {
    this._toolbarTitle = this.toolbarTitle.getToolbarTitle();
  }

  ngOnInit() {
    this._toolbarTitle = this.toolbarTitle.getToolbarTitle();
    console.log(this.toolbarTitle.getToolbarTitle());
  }
}

toolbar.component.html

<ion-toolbar color="primary">
  <ion-buttons slot="start">
    <ion-back-button defaultHref="/login"></ion-back-button>
  </ion-buttons>

  <ion-title> {{ _toolbarTitle }} </ion-title>

  <img src="assets/specto_logo.svg" />
</ion-toolbar>

Answer 1

好的，可能不会因为您的 OnPush ChangeDetectionStrategy.

而改变

让我们用 observables 构建它：

服务

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

@Injectable({
  providedIn: 'root',
})
export class ToolbarTitleService {
  title = new BehaviorSubject('toolbarTitle');

  setToolbarTitle(title) {
    this.title.next(title);
  }
}

组件

export class ToolbarComponent implements OnInit {
  _toolbarTitle = this.toolbarTitle.title;
  constructor(private toolbarTitle: ToolbarTitleService) {}
//...
}

html

<ion-toolbar color="primary">
  <ion-buttons slot="start">
    <ion-back-button defaultHref="/login"></ion-back-button>
  </ion-buttons>

  <ion-title> {{ _toolbarTitle | async }} </ion-title>

  <img src="assets/specto_logo.svg" />
</ion-toolbar>

因此，对于可观察对象，您不需要“获取”您的标题，因为它是一个流，html 中的 async 管道将持续“观察”变化

服务中的值更改后更新组件视图

Update view of component after value changes in service

angular-services

angular