[英]Access to the parent value from child component [Angular]
AppComponent(父级)具有主页(版式)和页面计数器:
export class AppComponent {
counter = '1/3';
}
<div class="counter">
{{counter}}
</div>
页面内容还由两个组件(子组件)负责。 从子组件中,需要有权访问父值(计数器)。
其中之一:
import {AppComponent} from '../app.component';
export class Page1Component {
app: AppComponent;
}
SomeEvent($event) {
this.app.counter='2/3';
}
<div class="content">
...
</div>
事件发生后,我得到一个错误:“ TypeError:无法读取未定义的属性'counter'”
问题:如何正确操作父变量?
在子组件中添加输入字段:
@Input() counter: any;
然后,您可以在父html中绑定到此属性:
<child-component-selector [counter]="counter"></child-component-selector>
您这样做的方式错误,您无法做到这一点。.您必须通过@Input
标记以以下方式执行此@Input
例如:
export class AppComponent {
counter = '1/3';
}
在应用程序组件的html中
<ChildComponent [counter]="counter"></ChildComponent>
在你的孩子部分
import { Component, Input } from '@angular/core';
export class ChildComponent{
@Input() counter:any;
//after this you can use counter
}
在这里更多
您可以通过输入属性将父变量传递给子组件。
import {Input} from '@angular/core';
export class Page1Component {
@Input() counter;
SomeEvent($event) {
this.counter='2/3';
}
}
在您的应用中,您可以通过柜台
app.component.html
<page1 [counter]="counter"><page1>
如果您还想更改父级的计数器,则可以定义输出事件发射器,并在发生某些事件时在父级中调用方法
如果要更改父项的权限,请更新 :
import {Output} from '@angular/core';
export class Page1Component {
@Output() change: EventEmitter<any> = new EventEmitter();
SomeEvent($event) {
this.change.emit();
}
}
app.component.html
<page1 [change]="counterChanged()"><page1>
app.component.ts
export class AppComponent{
counterChanged() {
this.counter = "whatever value";
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.