Question

我有一个组件来显示左框。该组件更改公共标志“ flagBlocoLateral”以标识此框是否可见。

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

@Component({
  selector: 'app-bloco-lateral',
  template: `
    <div class="bloco-lateral" [ngClass]="{'bloco-lateral--aberto':flagBlocoLateral}">
      <div class="bloco-lateral__conteudo" *ngIf="flagBlocoLateral">
        <div class="row">
          <div class="col-12">
            <h4>Ajuda</h4>
          </div>
          <div class="col-12" [innerHTML]="textoInformativo">
          </div>
        </div>
      </div>
      <div class="bloco-lateral__menu">
        <ul>
          <li matTooltip="Ajuda" (click)="toggleBlocoLateral(!flagBlocoLateral)">
            <fa-icon icon="info-circle"></fa-icon>
          </li>
        </ul>
      </div>
    </div>`
})
export class BlocoLateralComponent implements OnInit {

  @Input()
  textoInformativo: string;
  flagBlocoLateral = false;

  constructor() {
  }

  ngOnInit() {
  }

  toggleBlocoLateral(flag) {
    this.flagBlocoLateral = flag;
  }


}

在我的打字稿代码中，我正在使用组件和公共的“ flagBlocoLateral”属性来调用ngClass。如果我在组件内部调用toggleBlocoLateral，则ngClass无法正常工作。

<app-bloco-lateral #blocoLateral></app-bloco-lateral>
<div class="bloco-central" [ngClass]="blocoLateral.flagBlocoLateral ? 'bloco-central--resize':''">

但是，如果我尝试在组件外部（使用{{blocoLateral.flagBlocoLateral}}打印“ flagBlocoLateral”属性，则ngClass属性可以正常工作。

有什么想法吗？谢谢。

Answer 1

请尝试直接在调用的方法内部取反值，而不要传递参数。实际上没有必要执行此步骤。

在您的HTML文件中：

<li matTooltip="Ajuda" (click)="toggleBlocoLateral()">

在您的TS文件中：

toggleBlocoLateral() {
  this.flagBlocoLateral = !this.flagBlocoLateral;
}

Angular 6不调用ngClass

1 个答案: