Question

开发仪表板我发现以下错误，我知道这是因为我对Angular循环的处理不正确。我找到了解决方法，但不是真正的解决方案。

我有一个充当全局作用域的服务，然后在您单击登录按钮时，将身份验证属性更新为true。

当它变为真时，我有一个ngif，它显示带有标题的标题，该标题存储在全局范围中

在主屏幕上，我更新了全局范围内标题的值。那一刻我得到了错误错误：“ ExpressionChangedAfterItHasBeenCheckedError：检查表达式后已更改。上一个值：'FormTitle：'。当前值：'FormTitle：Home'。”

全局范围：

import { Injectable } from '@angular/core';

@Injectable()
export class ScopeService {
  scope: any = {
    FormTitle:"",
    showMenu:false,
    loading:false,
    authenticated:false
  };
}

app.component.html

<div class="container-flow">
    <app-header *ngIf="ScopeService.scope.authenticated [FormTitle]="ScopeService.scope.FormTitle"></app-header>
<app-navigation *ngIf="ScopeService.scope.authenticated"></app-navigation>
<div class="main-container">
    <router-outlet></router-outlet>
</div> 
</div>

header.component.html

<div class="main-header">
    <h1 class="title"> {{ FormTitle }} </h1>
</div>

home.commonent：

import { Component, OnInit } from '@angular/core';
import { ScopeService } from '../../services/scope.service';
import { ApiService } from '../../services/api.service';
import { Router , ActivatedRoute } from "@angular/router";
import { FormBuilder, FormGroup , Validators } from '@angular/forms';



@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})


export class HomeComponent implements OnInit {
    viewForm: FormGroup; 
  

    constructor(private formBuilder: FormBuilder,
        private ScopeService:ScopeService,
        private ApiService: ApiService,
        private route: ActivatedRoute,
        private router:Router) { }

    ngOnInit() {
        this.ScopeService.scope.FormTitle = this.route.snapshot.data['title'];
    }
}

登录点击事件：

continuar() {
    this.ScopeService.scope.authenticated = true;
    this.router.navigate(['home'],{ skipLocationChange : true }); 
}

ngIf全局服务ExpressionChangedAfterItHaHasBeenCheckedError

0 个答案: