Question

我知道存在类似的问题，但没有一个能为我提供有效的答案。

基本上我有一个网站，其中包含一些动态注入数据的服务

在我的app.component.ts中，我有两个标题..一个在主页上，一个在你的任何其他页面上时

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

现在我还有一个动态注入标题标题的服务

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

然后在我的家庭组件中，例如我设置标题

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

}

现在基本上它都在工作，直到我在两个标题上放入if语句

现在我收到此错误

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: ' We strive to create things that are engaging, progressive & above all innovative. '.

我不确定如何解决这个问题..我尝试在ngAfterViewInit中设置值，但它没有做任何事情

还是有人知道我能做到的另一种方式吗？

由于

Answer 1

您可以尝试使用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);

请注意，这是一个解决方案，而不是问题的完整proff解决方案。

要知道角度变化检测中出现此错误的原因，您需要知道变更检测在Angular中的工作原理，您可以通过Maxim NgWizard K

来参考此博客

Answer 2

我知道我已经修好了。

这是一篇很棒的帖子

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

我强制进行变更检测

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

constructor(private cd: ChangeDetectorRef) {
}

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

获取ExpressionChangedAfterItHasBeenCheckedError Angular 4

2 个答案: