immer ExpressionChangedAfterItHasBeenCheckedError Angular 4

Question

Im bewußt ähnlichen Fragen existieren, aber keiner von denen, hat mir mit einer Antwort zur Verfügung gestellt, das funktioniert ..

Im Prinzip habe ich eine Website mit einigen Dienstleistungen, die Daten dynamisch

In meiner App injizieren. component.ts ich habe zwei Header .. ein, wenn Sie auf der Homepage und eine für, wenn Sie auf einer anderen Seite

app.component.html

<app-header *ngIf="router.url !== '/'"></app-header> 
<app-header-home *ngIf="router.url != '/'"></app-header-home> 
<router-outlet></router-outlet> 
<app-footer></app-footer> 

app.component.ts

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent { 
    title = 'app'; 
    router: string; 

    constructor(
    private _router: Router 
) { 
     this.router = _router.url; 
    } 
} 

jetzt habe ich auch einen Service, der den Titel des Kopf

headerTitle.service.ts

import { Injectable } from '@angular/core'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class HeaderTitleService { 
    title = new BehaviorSubject(''); 

    constructor() { } 

    setTitle(title: any) { 
    this.title.next(title); 
    } 
} 

dann dynamisch spritzt In meiner Home-Komponente zum Beispiel setze ich den Titel

home.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core'; 
import { HeaderTitleService } from '../../services/headerTitle.service'; 
import { HeaderImageService } from '../../services/headerImage.service'; 
@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.scss'] 
}) 
export class HomeComponent implements OnInit { 

    constructor(
    private headerTitleService: HeaderTitleService, 
    private headerImageService: HeaderImageService 
) { } 

    ngOnInit() { 

    } 

    ngAfterViewInit() { 
    this.headerTitleService.setTitle(` 
    We strive to create things 
    <br> that are engaging, progressive 
    <br> &amp; above all 
    <span class="highlight"> 
    <em>innovative.</em> 
    </span> 
    `); 
} 

} 

jetzt im Grunde war alles zu arbeiten, bis ich

jetzt Im immer diese Fehlermeldung

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: ' We strive to create things <br> that are engaging, progressive <br> &amp; above all <span class="highlight"> <em>innovative.</em> </span> '.

in den if-Anweisungen auf den beiden Header setzen

nicht sicher, wie ich das beheben kann .. Ich habe versucht, die Werte in ngAfterViewInit, aber es tat nichts

oder weiß jemand einen anderen Weg, ich könnte dies erreichen ??

Dank

Answer 1

können Sie versuchen, eine setTimeOut Methode statt und stellen innerhalb dieser zu den

setTimeout(this.headerTitleService.setTitle(` 
    We strive to create things 
    <br> that are engaging, progressive 
    <br> &amp; above all 
    <span class="highlight"> 
    <em>innovative.</em> 
    </span> 
`), 0); 

Notiz dies eine Arbeit um und nicht eine vollständige proff Lösung die Werte mit Problem .

Um zu wissen, warum dieser Fehler in der Winkeländerungserkennung auftritt müssen Sie wissen, wie die Änderungserkennung in Angular für diese Arbeiten Sie in diesem Blog von Maxim NgWizard K

Answer 2

in mir Ich weiß, dass ich feste diese verweisen.

hier ist ein großer Beitrag

everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror

i die Änderungserkennungs

export class AppComponent { 
name = 'I am A component'; 
text = 'A message for the child component'; 

constructor(private cd: ChangeDetectorRef) { 
} 

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