Geek Answers Handbook

How to trigger change event manually - angular2

Given the following components:

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

As I understand it, unless the object itemis modified, angular2 will not recognize the change on item. Therefore, I would like to generate a change event manually for itemwhen the method is called updateItem. And then make a child component, i.e. CompBresubmitted as if angular detected a change in normal mode.

ngOnInit CompB updateItem ViewChild. , someArray, reset . , someArray. ngOnInit.

, : ?

+6
1

, , angular2 .

. ngOnChanges DOM . Angular , item ngOnChanges, DOM - , item . , . :

, CompB , Angular .

, 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:

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

    constructor(cd: ChangeDectorRef) {}

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

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

:

+4

More articles:


All Articles