1
votes

Angular 7 - Propriété de référence en service ou y souscrire

J'ai un service avec une propriété à laquelle je souhaite faire référence et que je souhaite modifier dans plusieurs composants. Puis-je simplement le référencer directement dans mes composants en l'attribuant à une propriété du composant ou dois-je m'abonner à une observable? Je l'ai essayé dans les deux sens et lorsque je le modifie dans le composant, les deux sens semblent changer la propriété du service.

account.service.ts

export class AccountComponent implements OnInit {

constructor(private _accountService: AccountService) { }

changeAccountNumber() {
    this.account.account_number = "changed"
}

account: Account = this._accountService.testAccount;

grabAccount(): void {
    this._accountService.getAccount()
        .subscribe(account => this.account = account);
}

ngOnInit() {
    //this.grabAccount();
}

}

account.component .ts

export class AccountService {

constructor(private http: HttpClient) { }

testAccount: Account = {
    domain_name: "fortestaccoutnpage2",
    account_number: "fortestaccoutnpage2",
    bill_timing: "anniversary",
    }

getAccount(): Observable<Account> {
    return of(this.testAccount);
}

}

Dans l'exemple ci-dessus, j'ai essentiellement un compte dans le composant, référez-vous au testAccount dans le service et la méthode changeAccountNumber fonctionne. J'ai commenté la méthode pour que le compte s'abonne à l'observable, mais quand je le fais de cette façon, cela fonctionne aussi. Une solution est-elle meilleure que l'autre ou les deux sont-ils bien?

angular

0 commentaires

3 Réponses :

0
votes

getAccount(): Observable<Account> {
    return of(JSON.parse(JSON.stringify(this.testAccount)));
}

2 commentaires

Je veux qu'ils se réfèrent au même objet en mémoire. J'étais juste curieux de savoir si le faire en m'abonnant à un observable était mieux / différent que de simplement faire: this.account = _accountService.testAccount

@ connor.roche, l'avantage d'avoir l'abonnement est que tous les différents composants qui sont abonnés aux mêmes données doivent être mis à jour lorsque l'objet du service est publié, de cette façon, vous n'avez pas à rechercher manuellement les mises à jour dans le autres composants.

3
votes

Il est probablement préférable de s'abonner, au lieu d'être référencé directement depuis le service.

L'avantage de subscribe est que l'appel ne sera déclenché que lorsque l'observable sera appelée. Donc, dans ce cas, cela n'a pas vraiment d'importance, car vous utilisez simplement un objet de test. Mais si vous appeliez depuis un serveur, vous ne pouviez pas être sûr de la récupération de vos données. Donc, si vous cliquiez sur le bouton avant que les données ne reviennent, les choses pourraient aller au sud.

De plus, actuellement, vous ne faites rien, sauf pour attribuer le compte à une propriété. Ce qui est valable. Mais si plus tard, vous voulez faire autre chose, comme avoir un spinner de chargement, et le désactiver lorsque vous obtenez les données. Vous auriez besoin de profiter de l'observable à coup sûr.

Modifier: En outre, il n'est probablement pas très pratique de modifier le compte à l'intérieur du composant lui-même. Cela fonctionnerait à coup sûr, mais cela peut entraîner des bogues déroutants et rendre les choses plus difficiles à tester si vous suivez cette voie. Il vaut mieux que les changements soient centralisés. Je recommanderais d'ajouter une méthode au service pour changeAccountNumber (newNumber), et ce service pousserait une nouvelle observable avec la valeur de compte modifiée. Un peu compliqué, mais c'est beaucoup plus testable et je dirais plus facile à maintenir.

0 commentaires

0
votes

Utilisez l'implémentation du sujet de comportement de Rxjs, déclarez un votre service et installez un sujet de comportement, après avoir créé une autre variable asObserver, vous devez utiliser la méthode suivante sur les implémentations de sujet de comportement en utilisant dans votre composant d'intérêt pour envoyer les dernières modifications à votre comportement Sujet dans votre service et plus tard, vous pouvez vous abonner à n'importe quel composant que vous vouliez l'information

vérifier ceci d'abord https://medium.com/@luukgruijs/understanding- rxjs-comportementsubject-replaysubject-and-asyncsubject-8cc061f1cfc0

et ceci http://reactivex.io/rxjs/manual/overview.html

essayez quelque chose et après je pourrai mieux vous aider

0 commentaires