수동으로 변경 이벤트를 트리거하는 방법 - 각도2

수동으로 변경 이벤트를 트리거하는 방법 - 각도2

다음 구성 요소가 주어집니다.

@Component({
    selector: 'compA',
    template:  template: `<compB [item]=item></compB>`
})
export class CompA {
    item:any;
    updateItem():void {
        item[name] = "updated name";
    }
}

@Component({
    selector: 'compB',
    template:  template: `<p>{{item[name]}}</p>`
})
export class CompB implements OnInit{
    @Input() item: any;
    someArray: any[];

    ngOnInit():void {
        someArray.push("something");
    }
}

내가 이해한 바로는 완전하지 않은 한item개체가 변경되었습니다. angular2가 변경 내용을 인식하지 못합니다.item따라서 다음 기간 동안 수동으로 변경 이벤트를 내보내고 싶습니다.item그 때updateItem메서드가 호출됩니다.그런 다음 자녀 구성 요소를 만듭니다. CompB각도가 일반적인 방식의 변화를 감지한 것처럼 다시 표시됩니다.

현재 제가 한 일은 다음을 구현하는 것입니다.ngOnInit의 방법.CompB그리고 그 방법을 안으로 불러들입니다.updateItema를 통한 방법ViewChild링크. 이야기의 또 다른 부분은 내 실제 출처가 다음과 같은 물체를 가지고 있다는 것입니다.someArray각 렌더에서 재설정할 수 있습니다.재설정을 다시 렌더링할지 확신할 수 없습니다.someArray그래도.현재, 저는 그것들을 재설정하고 있습니다.ngOnInit방법.

그래서 제 질문은 어떻게 하면 상위 개체의 더 깊은 요소에 대한 변경사항에 대한 렌더링을 트리거할 수 있을까 하는 것입니다.

감사해요.

제가 알기로는 전체 아이템 객체가 변경되지 않는 한 angular2는 아이템의 변경을 인식하지 못하는 것으로 알고 있습니다.

그렇게 간단하지는 않습니다.트리거링을 구별해야 합니다.ngOnChanges개체가 변환되고 하위 구성 요소의 DOM 업데이트가 수행됩니다.앵귤러는 그것을 인식하지 못합니다.item변경되었으며 트리거되지 않습니다.ngOnChanges라이프사이클 후크, 그러나 DOM은 만약 당신이 특정 속성을 참조한다면 여전히 업데이트될 것입니다.item템플릿에 있습니다.그 물건에 대한 참조가 보존되어 있기 때문입니다.따라서 다음 동작을 수행합니다.

그런 다음 자녀 구성 요소를 만듭니다.각도가 일반적인 방식의 변화를 감지한 것처럼 CompB가 다시 렌더링되었습니다.

DOM에 업데이트가 남아 있기 때문에 특별히 아무것도 할 필요가 없습니다.

수동 변경 감지

변경 디텍터를 삽입하고 다음과 같이 트리거할 수 있습니다.

@Component({
    selector: 'compA',
    template:  template: `<compB [item]=item></compB>`
})
export class CompA {
    item:any;
    constructor(cd: ChangeDetectorRef) {}

    updateItem():void {
        item[name] = "updated name";
        this.cd.detectChanges();
    }
}

현재 구성 요소와 모든 하위 구성 요소에 대한 변경 탐지를 트리거합니다.

그러나 Angular가 변화를 감지하지 못하더라도 당신의 경우에는 아무런 영향이 없을 것입니다.item하위 항목에 대한 변경 탐지를 계속 실행합니다.B구성 요소 및 DOM을 업데이트합니다.

사용하지 않는 한ChangeDetectionStrategy.OnPush이 경우에 당신이 할 수 있는 한 가지 방법은 다음에서 수동 점검을 하는 것입니다.ngDoCheck의 갈고리CompB:

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

export class CompB implements OnInit{
    @Input() item: any;
    someArray: any[];
    previous;

    constructor(cd: ChangeDetectorRef) {}

    ngOnInit():void {
        this.previous = this.item.name;
        someArray.push("something");
    }

    ngDoCheck() {
      if (this.previous !== this.item.name) {
        this.cd.detectChanges();
      }
    }
}

자세한 내용은 다음 문서에서 확인할 수 있습니다.

• Angular 기사의 변경 탐지에 대해 알아야 할 모든 정보.
• Angular에서 DOM 업데이트의 역학
• Angular에서 속성 바인딩의 메커니즘이 업데이트됩니다.

CompB에 다른 입력을 넣어 CompA에서 항목의 속성을 변경하려면 이 입력의 값만 변경하면 됩니다.

@Component({
    selector: 'compA',
    template:  template: `<compB [item]=item [trigger]=trigger></compB>`
})
export class CompA {
    item:any;
    trigger: any;
    updateItem():void {
        item[name] = "updated name";
        trigger = new Object();
    }
}

@Component({
    selector: 'compB',
    template:  template: `<p>{{item[name]}}</p>`
})
export class CompB implements OnInit{
    @Input() item: any;
    @Input() trigger: any;
}

언급URL : https://stackoverflow.com/questions/44941635/how-to-trigger-a-change-event-manually-angular2