Angular 6不调用ngClass

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


}

在我的typescript代码中，我使用了组件内容和一个公共的"flagBlocoLateral“属性来调用ngClass。如果我在组件内部调用toggleBlocoLateral，ngClass将无法工作。

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

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

有什么想法吗？谢谢。

Answer 1

尝试在被调用的方法中直接取值，而不是通过传递参数。这一步实际上是不必要的。

在您的HTML文件中：

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

在您的TS文件中：

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