从子组件访问父值[Angular]-Java 学习之路

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：无法读取未定义的属性'计数器'”

问题：如何正确操作父变量？

3 回答

0
在子组件中添加输入字段：
```
@Input() counter: any;
```
然后你可以在父html中绑定到这个属性：
```
<child-component-selector [counter]="counter"></child-component-selector>
```
回复于 2024-04-26T16:20:08+08:00
0
你这样做是错误的，你不能这样做..你必须通过 @Input 标签以下列方式做到这一点

例如：
```
export class AppComponent {
   counter = '1/3';
}
```
在app组件的html中
<ChildComponent [counter]="counter"></ChildComponent>

在您的子组件中
```
import { Component, Input } from '@angular/core';
export class ChildComponent{
        @Input() counter:any;

         //after this you can use counter
   }
```
更多关于这是here
回复于 2024-04-26T16:20:08+08:00

您可以通过输入属性将父变量传递给子组件 .

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

    export class Page1Component {
      @Input() counter;

    SomeEvent($event) {
      this.counter='2/3';
    }
    }

在你的应用程序中，你可以通过柜台

app.component.html

<page1 [counter]="counter"><page1>

如果你想更改父级的计数器，你可以定义一个输出事件 Launcher ，并在发生某些事件时在父级中调用该方法

Update 如果你想改变父母的方式，你可以试试这个：

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

}

回复于 2024-04-26T16:20:08+08:00

从子组件访问父值[Angular]

3 回答

相关问题