なっExpressionChangedAfterItHasBeenCheckedErrorアンギュラ4

Question

イム認識して同様の質問が存在するが、それらのどれも

は基本的に私は私のアプリでは、動的に

データを注入一部のサービスでサイトを持っている..作品の答えを私に提供していません。 component.ts私は2つのヘッダ... 1あなたのホームページ上や、あなたの他のページで

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> 

のための1つを持っています

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; 
    } 
} 

は、今私はまた、動的に、ヘッダのタイトル

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); 
    } 
} 

を注入サービスを持っています例えば、私の家のコンポーネントでは、私はタイトルを設定しました

私は2つのヘッダ

上の文は、今Imは、このエラーに

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> '.

を取得した場合に入れてまで、今基本的にはすべての仕事をしていた

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> 
    `); 
} 

} 

これを修正する方法がわかりません。ngAfterViewInitに値を設定しようとしましたが、何もしませんでした

誰かがこれを達成できる別の方法を知っていますか？

おかげ

Answer 1

あなたは、これは回避しないと、完全なproffソリューションである代わりにsetTimeOutメソッドを使用して試してみて、値に

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); 

その内部ノートを設定することができます問題。

このエラーは、あなたが、私は私は私でこれを固定知っているあなたはMaxim NgWizard K

Answer 2

で、このブログを参照することができ、変化検出は、このために角度でどのように動作するかを知っておく必要があり角度変化の検出で発生理由を知っています。ここ

は偉大なポストは、私は、変化検出

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

constructor(private cd: ChangeDetectorRef) { 
} 

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