как пользоватьсябез обнаружения изменения обрыва? - PullRequest
Новая
       12

как пользоватьсябез обнаружения изменения обрыва?

0 голосов
/ 24 декабря 2018

Я пытаюсь узнать, как использовать ng-шаблон, изменив стандартный проект stackblitz.com «Hello», чтобы компонент Hello отображался с помощью ng-шаблона.К сожалению, он получает неприятный ExpressionChangedAfterItHasBeenCherredError.

Предыдущее значение: 'name: undefined'.Текущее значение: 'name: Angular'.Кажется, что представление было создано после того, как его родитель и дочерние элементы были грязно проверены.Был ли он создан в хуке обнаружения изменений ?

Может кто-нибудь объяснить, что это может быть выполнено без ошибки? 

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  @ViewChild('tpl') tpl;

  constructor(private _vcr: ViewContainerRef) { }

  ngAfterViewInit() {
    this._vcr.createEmbeddedView(this.tpl);
  }

}

app.component.html: 

<ng-template #tpl>
    <hello name="{{ name }}"></hello>
</ng-template>

Ссылка: https://stackblitz.com/edit/angular-48ptik?file=src%2Fapp%2Fapp.component.html

Ответы [ 2 ]

0 голосов
/ 24 декабря 2018

Некоторые из ловушек жизненного цикла вызываются перед частью рендеринга, когда Angular обрабатывает привязки, а некоторые - после

Angular вызывает ловушку жизненного цикла ngAfterViewChecked для компонента приложения, Вся привязка для приложенияКомпонент уже проверен. Но вы добавляете контейнер просмотра после проверки

. Чтобы избежать этого, вы можете использовать ловушку жизненного цикла ngOnInit 

ngOnInit() {
    this._vcr.createEmbeddedView(this.tpl);
  }

или Использовать setTimeOut 

ngAfterViewInit() {
    setTimeout(()=>this._vcr.createEmbeddedView(this.tpl))
  }

Ref:https://blog.angularindepth.com/a-gentle-introduction-into-change-detection-in-angular-33f9ffff6f10

0 голосов
/ 24 декабря 2018

Вы должны сделать это в ngOnInit вместо: 

  ngOnInit() {
    this._vcr.createEmbeddedView(this.tpl);
  }

Поскольку ngDoCheck называется после ngOnInit и до ngAfterViewInit.

Подробнее о Крючки жизненного цикла .

...