View不能通过element.classList.add（）立即从服务中更新

Posted 2021-04-11

我正在向服务中的元素添加css类，但是更改不会立即发生。所做更改大约需要一秒钟才能更新视图。我需要立即进行更改，并且不要拖延。我已经尝试过ApplicaionRef并在服务中调用this.applicationRef.tick()，但这没有用。我尝试在NgZone的this.zone.run中运行服务的方法，但这也没有用。

@Component({
  selector: 'calling',
  templateUrl: './calling.component.html',
  styleUrls: ['./calling.component.scss']
})
export class CallingComponent {
 constructor(private hidingService: HidingService) {}

 callHide() {
  this.hidingService.hide();
 }
}

@Injectable({
  providedIn: 'root'
})
export class HidingService {
 constructor() {}

 hide() {
  const elements = document.querySelectorAll('.hideable-field');
  elements.forEach(element => {
    element.classList.add('hide');
  });
 }
}

这里是styles.css（可从所有组件访问的）中的CSS供参考，但是此部分正在工作。添加此“ hide”类使用此CSS隐藏该字段：

.hideable-field {
  &.hide {
    visibility: hidden !important;
  }
}

如果我在组件中使用此隐藏逻辑，它将起作用。字段立即被隐藏。如果我在服务中使用此隐藏逻辑，则需要一点时间。

答案

通常，让服务进行更改会直接影响您组件的HTML，这是一种反模式。在Angular中使用文档查询选择器也不是一个好主意。但是，如果您想使某些事情快速运行，请尝试在服务中的hide函数周围设置一个超时：

 hide() {
  setTimeout(() => {
    const elements = document.querySelectorAll('.hideable-field');
    elements.forEach(element => {
      element.classList.add('hide');
    });
  }, 0)
 }

更正确的方法是在每个对象上都具有一个布尔isHidden属性。然后，可以在模板中使用[hidden]或*ngIf有条件地显示它们。有关两种方法之间差异的说明，请参见Angular2: conditional display, bind to [hidden] property vs. *ngIf directive。使用*ngIf的示例：

<ng-container *ngFor='let element of myElements'>
  <div class='my-element' *ngIf='!element.isHidden'></div>
</ng-container>