1

以下组件中的 matTooltip 正确重绘。工具提示的覆盖层和小气泡被渲染，但文本丢失（尽管在浏览器中检查时在 html 中）并且没有正确定位。

有趣的是，工具提示在我删除 detectChanges() 调用时有效，或者它在 *ngFor 之外有效，即使使用 detectChanges();

@Component({
  selector: 'mur-app-titlebar',
  templateUrl: './app-titlebar.component.html',
  styleUrls: ['./app-titlebar.component.scss']
})
export class AppTitlebarComponent implements OnInit, OnDestroy {
  public appbarItems: IMenuItem[];

  private destroy$ = new Subject();

  constructor(
    private appBarService: AppBarService, // my custom service
    private changeDetector: ChangeDetectorRef,
  ) {
  }

  public ngOnInit() {
    this.appBarService.getAppbarItems().pipe( //observable comes from outside of angular
      takeUntil(this.destroy$)
    ).subscribe(value => {
      this.appbarItems = value || [];
      // change detection is not triggered automatically when the value is emmited
      this.changeDetector.detectChanges(); 
    });
  }

  public ngOnDestroy() {
    this.destroy$.next();
  }

}

<ng-container *ngFor="let item of appbarItems">
      <button mat-button
              (click)="item.onclick && item.onclick()"
              [disabled]="item.disabled"
              [matTooltip]="item.tooltip"
              [style.color]="item.color">
        <mat-icon *ngIf="item.icon"
                  [class.mr-3]="item.label">
          {{item.icon}}
        </mat-icon>
        <span>{{item.label}}</span>
      </button>
     
    </ng-container>

我已经验证，appbarItems 只设置了一次并且没有改变

4

1 回答 1

3

通常你不需要cdRef.detectChanges()在 Angular 中调用异步操作的回调。

但是，如果您这样做，则意味着您正在尝试解决视图更新的某些问题。异步代码后组件视图未更新的原因可能有多种：

  • 您的组件被隐藏以在 OnPush 更改检测策略下进行检查

  • 回调在 Angular 区域之外执行。

看起来你遇到了第二种情况。在 Angular 区域之外调用 cdRef.detectChanges 会给您带来一些 Angular 处理程序将在 Angular 区域之外注册的情况。因此，这些处理程序不会更新视图，您将在其他地方调用 detectChanges 或再次使用 zone.run。

这是此类情况的示例https://ng-run.com/edit/XxjFjMXykUqRUC0irjXD?open=app%2Fapp.component.ts

您的解决方案可能会使用以下方法将代码执行返回到 Angular 区域ngZone.run：

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

.subscribe(value => {
  this.ngZone.run(() => this.appbarItems = value || []);
于 2020-08-14T12:53:29.633 回答