如何在不使用角度的ng的情况下将输入值从父组件传递给子组件？

Posted 2023-02-23

【中文标题】如何在不使用角度的ng的情况下将输入值从父组件传递给子组件？

【英文标题】：How to pass input value from parent component to child without using ng in angular?

【发布时间】：2018-10-05 15:50:47

【问题描述】：

我有 Angular 应用程序，它具有父组件和子组件交互。我需要使用点击事件将输入数据值传递给子组件。它必须在单击提交按钮时显示。

如何使用输入输出事件发射器

https://stackblitz.com/edit/angular-7ojvmd

【问题讨论】：

stackblitz.com/edit/angular-6hkdjr ，如果你想看看我在下面回答的变化

【参考方案1】：

我认为您可以做的最简单的事情如下，将一个属性绑定到子元素并在点击事件时更新该属性。

   @Component(
  selector: 'my-app',
  template: `Welcome Parent <br>
          <p>Name: <input type="text" [(ngModel)]="name" > <br></p>
          <p>Mobile: <input type="text" ><br></p>
         <button (click)="updatechild()">Submit</button>
         <preview [param1]="forChild" ></preview>
          <button (click)="add.next(control.value)">Add</button>
                `

)
export class AppComponent  
  public name:string="";
  forChild:string="";
   updatechild()
     this.forChild=this.name
   

【讨论】：

如何打印值名称、手机、密码及其标签，还有没有使用 forchild 的替代方法

您可以创建一个定义对象结构的接口，并将该对象属性绑定到您的表单，同样您可以拥有一个可以发送给子对象并更新的对象单击提交时该子对象。如果您直接将单个对象从父对象绑定到子对象，那么显然它会在您更改父对象时立即反映更改，所以我认为没有其他简单的方法可以做到这一点，以防万一，请更新： )

这里如何使用输入输出事件参数

它会完全一样，但是如果你想从 child 发射到parent，您可以发出类似的对象，您可以在 parent 中收听。

让我知道除了我添加的stackblitz.com/edit/angular-6hkdjr