Javascript 如何避免；表达式ChangedTerrithasbeenscheckedError“；或；无法读取未定义的属性"；当你'；重新使用“中的信息”@ViewChild"；？

我想了解一些关于@ViewChild的问题以及它是如何工作的。 我使用的是angular 8，由于某些原因，我出现了一些错误，例如“ExpressionChangedTerithasBeenCheckedError”或“无法读取未定义的属性”

我试图在@ViewChild上使用

{static:false}

，但我得到了相同的错误。那么，我们如何解决这个问题以及它是如何工作的呢

我理解，子组件在显示父组件之后运行。我使用了一些方法，比如ngAfterViewInit和AfterViewChecked，来等待子信息，但是我得到了相同的错误。我错过什么了吗

下面是我的代码：

app parent.component.ts

@Component({ selector: 'app-parent', templateUrl: './app-parent.component.html' })
export class AppParentComponent implements OnInit, AfterViewChecked {

  @ViewChild('backbtn', {static: false}) backReference : ChildBackComponent;
  previousurl : string = null;

  /*...codes...*/
  ngAfterViewChecked() {
    this.previousurl = this.backReference.previousUrl;
  }
  /*...codes...*/

@Component({ selector: "app-child-back-button", templateUrl: "./child-back-button.component.html" })
export class ChildBackComponent implements OnInit {
  public previousUrl: string = "/";

  ngOnInit() {
    this.previousUrl = "/previousurl";
  }

@Component({ selector: 'app-parent', templateUrl: './app-parent.component.html' })
export class AppParentComponent implements OnInit, AfterViewInit {

  @ViewChild('backbtn', {static: false}) backReference : ChildBackComponent;
  previousurl : string = null;

  /*...codes...*/
  ngAfterViewInit() {
    setTimeout(() => {
      this.previousurl = this.backReference.previousUrl;
    }, 1000);
  }

  /*...codes...*/

app parent.component.html

<!-- HTML codes -->
<app-child-back-button #backbtn >Button</app-child-back-button>
<app-another-child-element *ngIf="currentUrl" [url]="previousurl" ></app-another-child-element>

<a routerLink="{{ previousUrl }}"><ng-content></ng-content></a>

返回子按钮.component.html

<!-- HTML codes -->
<app-child-back-button #backbtn >Button</app-child-back-button>
<app-another-child-element *ngIf="currentUrl" [url]="previousurl" ></app-another-child-element>

<a routerLink="{{ previousUrl }}"><ng-content></ng-content></a>

嗯，这似乎不是一件优雅的事情，但它解决了我的问题，效果很好。在从viewchild获取一些信息之前，可能需要等待所有组件可用

另一个解决方案似乎更复杂，我必须管理和检测更改，只是为了解决仅在开发模式下发生的问题。所以，第一个解决方案对我来说很好。谢谢

基于此，这里有两种方法可以修复它

旁注：由于您试图从视图子级获取最新更新的值，因此需要更新代码

@ViewChild('backbtn', {static: true}) backReference : ChildBackComponent;

使用像这样的设置超时

  ngAfterViewChecked() {
    setTimeout(() => {
        this.previousurl = this.backReference.previousUrl;
    }, 1000); // set timeout for 1 second you can change 2000 or 3000
  }

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})

将你的逻辑转移到ngOnInit

ngOnInit() {
    this.previousurl = this.backReference.previousUrl;
  }

像这样使用ChangeDection

  ngAfterViewChecked() {
    setTimeout(() => {
        this.previousurl = this.backReference.previousUrl;
    }, 1000); // set timeout for 1 second you can change 2000 or 3000
  }

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})

---

或者另一方面，你需要确保你让Angular拾取变化。最好的方法是使用markForCheck。

谢谢@tony ngo！我只是将一些代码更改为使用

ngAfterViewInit

，并在其中使用

setTimeout

。我将编辑我的问题。