*ngIf 不是预期的 hiding/showing 组件

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();
  }
}

选项组件的 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()

控制台会记录 'test' 以及 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;
  }
}

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

Here's a Sample Demo for your ref.

Answer 2

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

ts

constructor(public modalService: ModalService) { }

html

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

Answer 3

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

export class OptionsComponent implements OnInit {

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

  /* rest of code unchanged... */

*ngIf 不是预期的 hiding/showing 组件

*ngIf not hiding/showing component as expected

angular-services

angular-ng-if

angular

angular8