angular - ExpressionChangedAfterItHasBeenCheckedError 未定义输入参数

Question

绕圈子讨论如何解决这个问题。阅读到处突出显示的两个博客。了解原因，但无论我尝试什么，这个错误都不会消失。错误与输入参数有关。当组件加载时，它是未定义的，然后获得正确的值。

我试过使用:

• 子组件中的各种生命周期 Hook ，运气不好 - ngOnit，
• ngAfterViewChecked、ngAfterViewInit 等
• 尝试使用计时器
• 尝试在子组件中使用 ChangeDetectorRef
• 尝试使用 *ngIf="ComponentName"
• EventEmitter 为 true 以允许异步

我仍然得到错误。请有人看看我做错了什么。

错误信息

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'AreaName: undefined'. Current value: 'AreaName: dashboard'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

父组件 ts 文件。

export class Dashboard {
  public ComponentName: string = "dashboard";
  private showContent: boolean = false;

  constructor() {}

  public displayMethod(): void {}

  public CanAccess(canAccess : boolean) : boolean {
    return this.showContent = canAccess;
  }
}

父组件 Html

<div class="content-area" >
   <h3>This is dashboard information</h3> 
</div>

<no-access [AreaName]="ComponentName" (AllowedAccess)="CanAccess($event)"></no-access> 

子组件 ts

export class NoAccess implements OnInit {

    @Input() AreaName: string;
    @Output() AllowedAccess = new EventEmitter<boolean>(true);
    public showSubContent: boolean;

    constructor(private authService : AuthenticationService) {}

    ngOnInit(): void {
      setTimeout(() => {
        this.showSubContent = this.authService.CanRead(this.AreaName, null);
        this.AllowedAccess.emit(false);
      });
    }
  }

Answer 1

试试这个:

export class Dashboard {
  public ComponentName: string = "dashboard";
  private showContent: boolean = false;

  constructor(private cd: ChangeDetectorRef) {
  }

  ngAfterViewInit() {
      this.cd.detectChanges();
  }

  public displayMethod(): void {}

  public CanAccess(canAccess : boolean) : boolean {
    return this.showContent = canAccess;
  }
}

恕我直言，这不是最佳解决方案，如此处所述https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4#c2ba ，但它应该有效。