ngIf 不重新调整变量值更改

Question

我有一个简单的布尔变量来显示/隐藏一个 div，当我从另一个组件调用该方法将变量设置为 true 时，ngIf 无法识别它。

我的消息-refresh.component.html：

<div class="divOpacity" *ngIf="show">
<div class="boxMessageModal">
    <p>Novos dados foram encontrados para esta página, clique em Ok para atualizar!</p>
    <button class="btnOktoReload" (click)="reloadPage()">Ok</button>
</div>

我的消息-refresh.component.ts

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-messages-refresh',
  templateUrl: './messages-refresh.component.html',
  styleUrls: ['./messages-refresh.component.css']
})

export class MessagesRefreshComponent implements OnInit {

  constructor(private location:Location) { }

  reloadPage(){
    location.reload(true)
  }

  show:boolean = false
  showDivOpacity(){
    this.show = true
  }

  ngOnInit() {
  }

}

我将另一个组件中的方法 showDivOpacity 称为this.messagesRefreshComponent.showDivOpacity()

Answer 1

您有不同的实例，因为您尝试对组件使用注入。

您必须尝试使用​​带有 BehaviorSubject 的注入类单例，这将只提供一个具有存储空间的实例来保存对象或值并通过注入在每个组件中获取它

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

@Injectable()
export class SettingsService {
  private showSubject = new BehaviorSubject<boolean>(false);

  setUpdateShow(){
      this.showSobject.next(!showSobject.getValue());
  }

  isShowing$(){
     this.showSobject.asObservable();
  }
}

然后在组件中注入值

显示主题的Component.ts

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-messages-refresh',
  templateUrl: './messages-refresh.component.html',
  styleUrls: ['./messages-refresh.component.css']
})

export class MessagesRefreshComponent implements OnInit {

  constructor(private settingsService:SettingsService ) { }
 show$: Observable<boolean>()
 ngOnInit() {
   this.show$ = this.settingsService.isShowing$();
 }
}

HTML

<div class="divOpacity" *ngIf="show$ | async">
<div class="boxMessageModal">
    <p>Novos dados foram encontrados para esta página, clique em Ok para atualizar!   </p>
    <button class="btnOktoReload" (click)="reloadPage()">Ok</button>
</div>

要调用或修改主题，您必须注入服务并调用 setUpdateShow() 函数，希望对您有所帮助。这有点难以理解，但它是通信组件之间不相关的组件的最佳解决方案。