Я полагаю, что причина, по которой вы боретесь, заключается в том, что у вас, кажется, есть родственные компоненты, пытающиеся манипулировать данными, в которых ни один из них не является истинным владельцем данных. Angular пытается принудительно установить однонаправленный поток данных , который просто означает передачу данных от родителя к потомку, а не от потомка к родителю. Самый простой способ решить вашу проблему - это иметь родительский компонент, который «владеет» userData, а дочерние компоненты связываются с данными для их отображения и генерируют события для манипулирования ими.
Используя ваш сценарий в качестве примера:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public userData: any = {
score: 2000
};
updateScore(score: number): void {
this.userData.score += score;
}
}
app.component.html
<app-header [score]="userData.score"></app-header>
<app-test (onScoreChange)="updateScore($event)"></app-test>
header.component.ts
import {Component, OnInit, Input} из '@ angular / core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
@Input('score') score: number;
constructor() { }
ngOnInit() {
}
}
header.component.html
<span class="topbar-details">
Scrore : {{score}}
</span>
test.component.ts
import {Component, OnInit, Output, EventEmitter} из '@ angular / core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
@Output('onScoreChange') onScoreChange = new EventEmitter<number>();
constructor() { }
ngOnInit() {
}
ansSubmit() {
this.onScoreChange.emit(54321);
}
}
test.component.html
<div class="col-2">
<button (click)="ansSubmit()" >
<div>Submit Answer</div>
</button>
</div>
Примечание: Что касается загрузки пользовательской информации из локального хранилища, я бы использовал службу для ее обработки. Где и как загружаются пользовательские данные, на самом деле не касается компонентов, которые отображают данные и управляют ими. Перемещение этой логики в службу с надлежащим интерфейсом (вероятно, возвращающую наблюдаемые, если данные могут когда-либо поступить из удаленного местоположения) позволит вам беспрепятственно поменять службу на основе локального хранилища на службу на основе HTTP, чтобы принудительно передать все оценки к / с сервера без изменения строки кода в вашем компоненте. Это также позволит вам поменяться в фиктивной службе для тестирования, поэтому для прохождения теста не нужно заполнять локальное хранилище (т. Е. Ваши тесты должны знать меньше о реализации вашего компонента для прохождения, поэтому они будут не быть таким хрупким при изменениях реализации)