Observable 设置的属性值在 routerLink 重定向上丢失了值答案

【问题标题】：Property value set by Observable loses value on routerLink redirectObservable 设置的属性值在 routerLink 重定向上丢失了值
【发布时间】：2018-03-29 15:16:11
【问题描述】：

我遇到的问题是：当从 'localhost/' 到 'localhost/accounts/:account_id' 或反之时，AngularFire Observable 设置的属性失去了它的价值。

在我的 Chrome DevTools
在 onInit() 的第一次调用中， this.accounts 已记录

但 onInit()
this.accounts 的每个 第 2 次em> 调用都不会被记录；除非 Firestore 发生更改或刷新整个页面，否则在帐户中循环的 accounts.component.html 根本没有任何价值。

我想要实现的是 this.accountsService.getAccounts() 在 onInit() 被调用时被触发

到目前为止，这是我的代码

app.module.ts

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'accounts/:account_id', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent }
];

home.component.html

...
  <app-accounts></app-accounts>
...

<h2 class="">Transactions</h2>
<div class="list-group list-accounts">
<a routerLink="" class="list-group-item list-group-item-action">
Add Funds
</a>
<a routerLink="" class="list-group-item list-group-item-action">Spend</a>
<a routerLink="" class="list-group-item list-group-item-action">Transfer</a>
<a routerLink="" class="list-group-item list-group-item-action">Receive</a>
</div>

account.service.ts

@Injectable()
export class AccountsService {
accountsCollection: AngularFirestoreCollection<Account>;


accounts: Observable<Account[]>;

  constructor(public afs: AngularFirestore) {

    this.accountsCollection = this.afs.collection<Account>('accounts');
    this.accounts = this.accountsCollection.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as Account;
        data.accountId = a.payload.doc.id;
        return data;
      });
    });

  }


  getAccounts() {
    return this.accounts;
  }


}

account.component.ts

export class AccountsComponent implements OnInit {


accounts: Account[];

constructor(private route: ActivatedRoute, private accountsService: AccountsService) { }

ngOnInit() {

console.log('onInit()');

this.accountsService.getAccounts().subscribe( accounts => {
  this.accounts = accounts;
  console.log(this.accounts);
});

}

}

和
account.component.html

<div class="list-group list-accounts">
    <a *ngFor="let account of accounts"
    class="list-group-item list-group-item-action"
    routerLink="/accounts/{{account.accountId}}"> {{account.name}} </a>
</div>

【问题讨论】：

你的<router-outlet>在哪里，你在哪里提供AccountsService？
@TomaszKula 在 app.component.html 中，AccountsService 在 app/src/services/account.service.ts 中（代码在描述中）

标签： angular observable angularfire2

【解决方案1】：

尝试将您的价值放在主题或行为主题中：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AccountsService {
accountsCollection: AngularFirestoreCollection<Account>;


private accounts = new BehaviorSubject<Account[]>([]);

  constructor(public afs: AngularFirestore) {

    this.accountsCollection = this.afs.collection<Account>('accounts');
    this.accountsCollection.snapshotChanges().map(actions => {
     this.accounts.next( 

        actions.map(a => {
           const data = a.payload.doc.data() as Account;
           data.accountId = a.payload.doc.id;

           return data;
        })

      );
    });

  }


  getAccounts(): Observable<Account[]> {
    return this.accounts.asObservable();
  }


}

【讨论】：