Итак, моя проблема заключается в том, что я хочу, чтобы параметр передавался через два компонента в моем приложении Angular, и когда я изменяю его значение в первом компоненте, значение также изменяется во втором.
Например, у меня есть игровой компонент, в котором я могу изменить два числовых значения (строку и столбец), и компонент сетки (который вызывается в игровом компоненте), который будет отображать HTML-таблицу с количеством строк и столбцов. из игрового компонента, который может быть изменен динамически.
Вот game.component.html
<header>
<h1>
Test App
</h1>
</header>
<div>
Number of rows: {{row}}
<button (click)="addRow()" >+</button>
<button (click)="removeRow()" >-</button>
</div>
<div>
Number of columns: {{column}}
<button (click)="addColumn()" >+</button>
<button (click)="removeColumn()" >-</button>
</div>
<grid [row]="row" [column]="column" >
</grid>
Вот game.component.ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'game',
templateUrl: './game.component.html',
styleUrls: ['./game.component.css']
})
export class GameComponent implements OnInit {
@Output() rowChange = new EventEmitter<number>();
@Output() columnChange = new EventEmitter<number>();
constructor() { }
ngOnInit(): void {
}
row = 5;
column = 5;
addRow(){
this.changeRow(1);
}
removeRow(){
this.changeRow(-1);
}
changeRow(delta: number){
this.row = Math.max(0, this.row + delta);
this.rowChange.emit(this.row);
}
addColumn(){
this.changeColumn(1);
}
removeColumn(){
this.changeColumn(-1);
}
changeColumn(delta: number){
this.column = Math.max(0, this.column + delta);
this.columnChange.emit(this.column);
}
}
Вот grid.component.html
<table>
<tr *ngFor="let r of row">
<td *ngFor="let c of column">
test
</td>
</tr>
</table>
И grid.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css']
})
export class GridComponent implements OnInit {
@Input() row: number;
@Input() column: number;
constructor() { }
ngOnInit(): void {
}
}
