Angular2:子组件访问父类变量/函数
Angular2:子组件访问父类变量/函数
提问于 2015-12-10 19:42:55
我在父组件中有一个变量，它可能会被子组件更改，父组件将在视图中使用该变量，因此必须传播更改。
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");
}
}回答 3
Stack Overflow用户
发布于 2016-10-22 07:26:45
像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
Stack Overflow用户
发布于 2016-11-28 00:28:56
您可以在父组件声明中执行此操作：
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.parentStack Overflow用户
发布于 2015-12-10 19:50:23
基本上，你不能直接从parent访问变量。您可以通过事件来执行此操作。组件的输出属性负责此操作。我建议你读一下https://angular.io/docs/ts/latest/guide/template-syntax.html#input-and-output-properties
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34201016
复制相关文章
相似问题
腾讯云开发者
