Estoy tratando de escribir una aplicación y no sé cómo cambiar un valor de variable que está definido en el componente principal y al que se accede en el componente secundario.

A continuación se muestra el código para el componente secundario:

Este es el marcado HTML del componente secundario:

 <p>Child Component Works!</p> <h2>{{name.name1}}</h2> <h4>{{name.Money1}}</h4> <h2>{{name.name2}}</h2> <h4>{{name.Money2}}</h4>

Componente hijo Código mecanografiado:

 import { Component, EventEmitter, OnInit, Input } from "@angular/core"; @Component({ selector: 'app-child-component', templateUrl: './child-component.component.html', styleUrls: ['./child-component.component.css'] }) export class ChildComponentComponent implements OnInit { @Input() name; constructor() { } ngOnInit() { } }

marcado Parent-component.html :

 <p> Parent Component </p> <app-child-component [name]="data"></app-child-component> <button> Send Money To Jack </button><br><br> <button> Send Money To Jill </button>

Código Parent-component.ts :

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-parent-component', templateUrl: './parent-component.component.html', styleUrls: ['./parent-component.component.css'] }) export class ParentComponentComponent implements OnInit { data = { name1:'jack', Money1:10, name2:'Jill', Money2:'15' } constructor() { } ngOnInit() { } }

Este es todo el código. Y a continuación se muestra la captura de pantalla de salida:

Esta es la salida. Quiero alguna función que cuando el usuario haga clic en el primer botón, la variable money1 se incremente en 10 y cuando el usuario haga clic en el segundo botón, la variable money2 se incremente en 10: