angular - onInit 函数抛出 ExpressionChangedAfterItHasBeenCheckedError？

Question

我正在学习Angular。我正在尝试实现，登录后页面重定向到主页。在我尝试过之后，

app.component.html

<header *ngIf='loggedIn'>
<h1>Test portal</h1>
</header>
<login *ngIf='!loggedIn' (homeVar)="loadHome()">Loading..</login>

<router-outlet></router-outlet>

app.component.ts

export class AppComponent implements OnInit {
  loggedIn = 0;
  constructor(private router:Router){}
  ngOnInit(){
    if(!this.loggedIn){
      this.router.navigate(['']);
    }

  }
    loadHome():void{
      this.loggedIn=1;
      this.router.navigate(['home']);

  }

}

login.component.ts

export class loginComponent implements OnInit  {
    @Output() homeVar:EventEmitter<string> = new EventEmitter();

    @SessionStorage() session:any = "";

    ngOnInit(){
        if(this.session != ""){
            this.homeVar.emit(this.session);
        }
    }
   check(){
      this.session = "user";
   }
 }

上面的代码工作正常，但它给出了以下错误

ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'ngIf: 0'。当前值：'ngIf：1'。

如何解决这个问题？

标签： angular

Answer 1

而不是在 onInit 内发出事件，而是使用构造函数

export class loginComponent {
    @Output() homeVar:EventEmitter<string> = new EventEmitter();

    @SessionStorage() session:any = "";

    constructor(){
        if(this.session != ""){
            this.homeVar.emit(this.session);
        }
    }
   check(){
      this.session = "user";
   }
 }

https://stackoverflow.com/a/48216423/2742156