Angular2: 하위 구성 요소 액세스 상위 클래스 변수/함수

Angular2: 하위 구성 요소 액세스 상위 클래스 변수/함수

상위 구성 요소에 자식에 의해 변경될 수 있는 변수가 있습니다. 부모는 보기에서 이 변수를 사용하므로 변경 사항을 전파해야 합니다.

import {Component, View} from 'angular2/core';

@Component({selector: 'parent'})
@View({
    directives: [Child],
    template: `<childcomp></childcomp>`
})
class Parent {
    public sharedList = new Array();
    constructor() {
    }
}


@Component({selector: 'child'})
@View({template: `...`})
class Child {
    constructor() {
        //access 'sharedList' from parent and set values
        sharedList.push("1");
        sharedList.push("2");
        sharedList.push("3");
        sharedList.push("4");
    }
}

JavaScript 참조 유형(예: Object, Array, Date 등)과 함께 입력 속성 데이터 바인딩을 사용하는 경우 부모와 자식 모두 동일한/하나의 개체에 대한 참조를 갖게 됩니다.공유 개체에 대한 변경 내용은 부모 및 자식 모두에게 표시됩니다.

상위 템플릿에서 다음을(를) 선택합니다.

<child [aList]="sharedList"></child>

하위 항목:

@Input() aList;
...
updateList() {
    this.aList.push('child');
}

자식 구성 시 항목을 목록에 추가하려면 후크를 사용하십시오(생성자()가 아니라). 데이터 바인딩 속성은 해당 시점에서 초기화되지 않기 때문입니다.

ngOnInit() {
    this.aList.push('child1')
}

이 플런커는 부모 및 자식 구성 요소에 공유 목록을 수정하는 단추가 있는 작업 예제를 보여줍니다.

하위 항목에서는 참조를 재할당하면 안 됩니다.예를 들어, 어린이에게 이 작업을 수행하지 마십시오.this.aList = someNewArray;이렇게 하면 상위 구성 요소와 하위 구성 요소가 각각 서로 다른 두 배열에 대한 참조를 갖게 됩니다.

원시 유형(예: 문자열, 숫자, 부울)을 공유하려면 배열이나 개체(예: 참조 유형 내부에 배치)에 넣거나emit()원시 값이 변경될 때마다 자식으로부터 발생하는 이벤트(즉, 부모가 사용자 정의 이벤트를 청취하도록 하고 자녀는EventEmitter출력 속성.자세한 내용은 @kit의 답변을 참조하십시오.)

2015/12/22 업데이트:heavy-loader구조 지침 가이드의 예제에서는 위에서 제시한 기법을 사용합니다.주/상위 구성 요소에 다음이 있습니다.logs하위 구성 요소에 바인딩된 어레이 속성입니다.하위 구성 요소push()상위 구성 요소가 해당 어레이에 표시됩니다.

NgModel이 NgForm으로 하는 것과 같은 작은 속임수는 어떻습니까?부모를 제공자로 등록한 다음 자녀의 생성자에 부모를 로드해야 합니다.

그렇게 하면, 당신은 그것을 넣을 필요가 없습니다.[sharedList]당신의 모든 아이들에게.

// Parent.ts
export var parentProvider = {
    provide: Parent,
    useExisting: forwardRef(function () { return Parent; })
};

@Component({
    moduleId: module.id,
    selector: 'parent',
    template: '<div><ng-content></ng-content></div>',
    providers: [parentProvider]
})
export class Parent {
    @Input()
    public sharedList = [];
}

// Child.ts
@Component({
    moduleId: module.id,
    selector: 'child',
    template: '<div>child</div>'
})
export class Child {
    constructor(private parent: Parent) {
        parent.sharedList.push('Me.');
    }
}

그러면 HTML.

<parent [sharedList]="myArray">
    <child></child>
    <child></child>
</parent>

이 주제에 대한 자세한 내용은 Angular 문서에서 확인할 수 있습니다. https://angular.io/guide/dependency-injection-in-action#find-a-parent-component-by-injection

상위 구성 요소에서 다음을 선언할 수 있습니다.

get self(): ParenComponentClass {
        return this;
    }

하위 구성 요소에서 ParenComponentClass 가져오기를 포함한 후 다음을 선언합니다.

private _parent: ParenComponentClass ;
@Input() set parent(value: ParenComponentClass ) {
    this._parent = value;
}

get parent(): ParenComponentClass {
    return this._parent;
}

그런 다음 부모의 템플릿에서 할 수 있습니다.

<childselector [parent]="self"></childselector>

이제 자녀로부터 다음을 사용하여 공용 속성 및 부모의 방법에 액세스할 수 있습니다.

this.parent

기본적으로 부모로부터 직접 변수에 액세스할 수 없습니다.당신은 이것을 사건별로 합니다.구성 요소의 출력 속성이 원인입니다.저는 https://angular.io/docs/ts/latest/guide/template-syntax.html#input-and-output-properties 을 읽는 것을 추천합니다.

이 주제에 대한 Angular2 설명서의 주요 기사는 다음과 같습니다.

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child

다음 내용을 다룹니다.

• 입력 바인딩을 사용하여 부모에서 자식으로 데이터 전달

• 세터를 사용하여 입력 속성 변경 가로채기

• ngOnChanges를 사용하여 입력 속성 변경 인터셉트

• 부모가 자식 이벤트를 수신합니다.

• 부모가 로컬 변수를 통해 자식과 상호 작용합니다.

• 부모가 ViewChild를 호출합니다.

• 부모와 자녀가 서비스를 통해 의사소통

언급URL : https://stackoverflow.com/questions/34201016/angular2-child-component-access-parent-class-variable-function