Angular 2에서 구성 요소의 재렌더링을 강제하는 방법은 무엇입니까?

Angular 2에서 구성 요소의 재렌더링을 강제하는 방법은 무엇입니까?

Angular 2에서 구성 요소의 재렌더링을 강제하는 방법은 무엇입니까?디버그 목적으로 Redux와 작업하기 위해 구성 요소가 뷰를 다시 렌더링하도록 강제하고 싶은데 가능합니까?

렌더링은 변경 사항 감지 후에 수행됩니다.변경된 구성 요소 속성 값이 DOM으로 전파되도록 변경 탐지를 강제로 적용하려면(그러면 브라우저가 해당 변경 내용을 보기에 렌더링함) 다음과 같은 옵션이 있습니다.

• ApplicationRef.tick() - Angular 1과 유사함$rootScope.$digest()즉, 전체 구성 요소 트리를 확인합니다.
• NgZone.run(콜백) - 유사$rootScope.$apply(callback)즉, Angular 2 영역 내의 콜백 함수를 평가합니다.콜백 기능을 실행한 후 전체 구성 요소 트리를 확인하는 것으로 끝나는 것 같습니다.
• ChangeDetectorRef.detectChanges() - 유사$scope.$digest()즉, 이 구성 요소와 하위 구성 요소만 확인합니다.

가져온 다음 주입해야 합니다.ApplicationRef,NgZone또는ChangeDetectorRef사용자의 구성 요소로.

특정 시나리오의 경우 구성 요소가 하나만 변경된 경우 마지막 옵션을 권장합니다.

tx, 필요한 해결 방법을 찾았습니다.

  constructor(private zone:NgZone) {
    // enable to for time travel
    this.appStore.subscribe((state) => {
        this.zone.run(() => {
            console.log('enabled time travel');
        });
    });

running zone.run을 실행하면 구성 요소가 강제로 다시 실행됩니다.

디텍터 참조 접근 방식 변경

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

export class MyComponent {

    constructor(private cdr: ChangeDetectorRef) { }

    selected(item: any) {
        if (item == 'Department')
            this.isDepartment = true;
        else
            this.isDepartment = false;
        this.cdr.detectChanges();
    }

}

*ngIf를 사용하여 구성 요소를 강제로 다시 로드합니다.

컨테이너 내부의 모든 구성요소는 전체 라이프사이클 후크로 돌아갑니다.

템플릿에서:

<ng-container *ngIf="_reload">
    components here 
</ng-container>

그런 다음 ts 파일에서:

public _reload = true;

private reload() {
    setTimeout(() => this._reload = false);
    setTimeout(() => this._reload = true);
}

여기에 있는 다른 답변은 구성 요소의 보기를 업데이트하는 변경 감지 주기를 트리거하는 솔루션을 제공합니다(전체 다시 렌더링과 동일하지 않음).

구성 요소를 파괴하고 다시 초기화하는 전체 재렌더(모든 라이프사이클 후크 호출 및 재구축 뷰)는 다음을 사용하여 수행할 수 있습니다.ng-template,ng-container그리고.ViewContainerRef다음과 같은 방법으로:

<div>
  <ng-container #outlet >
  </ng-container>
</div>

<ng-template #content>
  <child></child>
</ng-template>

그러면 두 가지를 모두 참조하는 구성 요소에서#outlet그리고.#content아웃렛의 내용을 지우고 하위 구성 요소의 다른 인스턴스를 삽입할 수 있습니다.

@ViewChild("outlet", {read: ViewContainerRef}) outletRef: ViewContainerRef;
@ViewChild("content", {read: TemplateRef}) contentRef: TemplateRef<any>;

private rerender() {
    this.outletRef.clear();
    this.outletRef.createEmbeddedView(this.contentRef);
}

추가로 초기 내용을 다음에 삽입해야 합니다.AfterContentInit후크:

ngAfterContentInit() {
    this.outletRef.createEmbeddedView(this.contentRef);
}

전체 작동 솔루션은 https://stackblitz.com/edit/angular-component-rerender 에서 확인할 수 있습니다.

ChangeDetectorRef.detectChanges()일반적으로 가장 집중적인 방법입니다. ApplicationRef.tick()일반적으로 너무 큰 망치 접근 방식입니다.

사용하기ChangeDetectorRef.detectChanges()구성 요소의 맨 위에 이 정보가 필요합니다.

import {  ChangeDetectorRef } from '@angular/core';

그런 다음 일반적으로 생성자에 주입할 때 다음과 같이 별칭을 붙입니다.

constructor( private cdr: ChangeDetectorRef ) { ... }

그런 다음 적절한 위치에서 다음과 같이 부릅니다.

this.cdr.detectChanges();

전화를 걸 곳ChangeDetectorRef.detectChanges()매우 중요할 수 있습니다.라이프사이클과 애플리케이션이 어떻게 작동하고 구성 요소를 렌더링하는지 정확히 이해해야 합니다.완벽하게 숙제를 하고 Angular 라이프사이클을 완전히 이해하는 것을 대신할 수 있는 것은 없습니다.이해가 되면 다음을 사용할 수 있습니다.ChangeDetectorRef.detectChanges()적절하게(때로는 어디에 사용해야 하는지 매우 쉽게 이해할 수 있고, 다른 때는 매우 복잡할 수 있습니다.)

언급URL : https://stackoverflow.com/questions/35105374/how-to-force-a-components-re-rendering-in-angular-2