将数据传递给文件 child.component.ts 文件而不是子模板

Posted 2023-02-23

【中文标题】将数据传递给文件 child.component.ts 文件而不是子模板

【英文标题】：Pass data to file child.component.ts file not child template

【发布时间】：2017-12-28 19:11:42

【问题描述】：

我正在将值从父组件传递给子组件。但在 child.component.html 中显示此值之前，我想在 app.component.ts 文件中将其增加 2 ，然后将其显示在 child.component .html。

在下面的示例中，我在父组件中取一个输入值，在 app.component.ts 中将其增加 2。然后我将它传递给子组件，我想再次将值增加 2。

child.component.ts

import  Component, OnInit, Input  from '@angular/core';

@Component(
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
)
export class ChildComponent implements OnInit 
@Input() quantity: number;

  constructor() 

  

  ngOnInit() 

  

  childFunction()
    this.quantity = this.quantity + 2;
  

child.component.html

<div class="container" style="border: 3px solid #458075; background-color: #6D948C; border-radius: 15px;">
  <div class="row">
    <div class="col-xs-12">
      <p>
        Parent value + 4 :  quantity 
      </p>
    </div>
  </div>
</div>

父 html 文件 app.component.html

<div class="container" style="border: 3px solid #515B89; background-color: #79809E; border-radius: 15px;">
  <div class="row">
    <div class="col-xs-12">
      <h1>
        title
      </h1>
      <label for="box">Value:</label>
      <input type="number" class="form-control" [(ngModel)]="value" (ngModelChange)="fun()" />
      <p>value:  value </p>
      <p>value + 2 :  newvalue </p>
    </div>
  </div>
  <div class="row">
    <div class="col--xs-12">
      <app-child [quantity]=newvalue></app-child>
    </div>
  </div>
</div>

app.component.ts

import  Component, OnInit  from '@angular/core';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  title = 'app works!';
  value: number = null;
  newvalue: number = null;

  constructor()
  

  ngOnInit()
  

  fun()
    this.newvalue = this.value + 2;
  

编辑： 解决方案， 所以我需要使用 ngOnChanges() 但这意味着像这样在子组件中的类上导入它并实现它，

import  Component, OnInit, Input, OnChanges  from '@angular/core';

@Component(
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
)
export class ChildComponent implements OnInit, OnChanges 
@Input() quantity: number;

  constructor() 

  

  ngOnInit() 

  

  ngOnChanges()
      this.quantity = this.quantity + 2;
  

附加： 仍然有一些奇怪的行为，即子组件中的值 newvalue 在输入任何值之前显示为 2。

好的，我解决了那个特别的小问题，

ngOnChanges()
    if(this.quantity)
      this.quantity = this.quantity + 2;
    
  

谢谢，

【问题讨论】：

你已经这样做了，有什么问题？

除了此处缺少的引号：[quantity]=newvalue，是什么问题？

我是？我没有在任何地方调用 childFunction() 。如果数量值发生变化，我会在哪里调用它以便始终更新它？感谢您查看此内容。

正确语法：[quantity]="newvalue"

考虑在子组件中添加一个OnChanges 生命周期钩子。引号应该围绕“newvalue”（但如果有效，嗯）。

【参考方案1】：

在子组件中添加 OnChanges 生命周期挂钩应该会为您提供所需的功能。

这将允许您在 @Input() 变量值更改时运行递增函数。

任何更改的@Input() 变量值都会触发您在实现OnChanges 时添加的ngOnChanges。

【讨论】：

感谢理查德，这将非常有用。也感谢您的明确解释。