*ngIf 没有按预期隐藏/显示组件

Question

我从一个组件调用这个modal.service.ts

export class ModalService {
  serviceText: boolean = true;

  toggleServices() {
    this.serviceText = !this.serviceText;
    console.log('test', this.serviceText);
  }
}

注入到options.component.ts下面...

import { Component, OnInit, Input } from '@angular/core';
import { ModalService } from '../modal.service';

@Component({
  selector: 'app-options',
  templateUrl: './options.component.html',
  styleUrls: ['./options.component.css'],
  providers: [ModalService]
})
export class OptionsComponent implements OnInit {
  serviceText: boolean = false;
  constructor(private modalService: ModalService) { }

  ngOnInit() {
  }

  services() {
    this.modalService.toggleServices();
  }
}

options 组件的 HTML 如下，并且有一个 click 监听器...

    <div class="tooth" >
      <img src="../../assets/tooth-brush.png" alt="tooth-brush" (click)='services()' style='cursor: pointer;'>
      <h5 (click)='services()' style='cursor: pointer;'>Services</h5>
      <app-services *ngIf="serviceText"></app-services>
    </div>

options.component.ts 中的services() 被调用，进而调用modal.service.ts 中的toggleServices()

控制台会记录“测试”以及 True 或 False，这是预期的行为。

但是，

options.component.html 中的 <app-services *ngIf="serviceText"></app-services> 没有像我预期的那样在显示或隐藏之间切换。

谁能明白为什么这不起作用？

提前致谢。

Answer 1

您需要在组件中使用 this.modalService.serviceText 初始化 serviceText，这可能是您忘记做的事情。

此外，由于这是您正在更新的服务中的一个布尔值，它是原始的，因此它将按值传递。

因此，每次在服务上切换 serviceText 时，您都必须在服务中使用 serviceText 重新分配组件中的 serviceText。

像这样在你的组件中这样做：

import { Component, OnInit, Input } from '@angular/core';
import { ModalService } from '../modal.service';

@Component({
  selector: 'app-options',
  templateUrl: './options.component.html',
  styleUrls: ['./options.component.css'],
  providers: [ModalService]
})
export class OptionsComponent implements OnInit {
  serviceText: boolean = false;
  constructor(private modalService: ModalService) { }

  ngOnInit() {
    this.serviceText = this.modalService.serviceText;
  }

  services() {
    this.modalService.toggleServices();
    this.serviceText = this.modalService.serviceText;
  }
}

这一切都应该按预期工作。

---

这里有一个Sample Demo 供您参考。

Answer 2

serviceText 在服务和组件中都定义，选择一个或让组件在模板中指向服务或创建属性。

export class OptionsComponent implements OnInit {

  get serviceText(): boolean { return this.modalService.serviceText; }

  /* rest of code unchanged... */

Answer 3

您需要使用 modalService.serviceText 而不是 serviceText 因为 ModaService 只是更新其内部变量

ts

constructor(public modalService: ModalService) { }

html

<app-services *ngIf="modalService.serviceText"></app-services>