我目前正在使用不相關的組件和一項共享服務。基本上，一個組件將呈現服務內部陣列中的所有專案，而另一個組件將呈現該陣列的長度。
不知道是不是我誤解了單身人士的概念：
單例服務是一種在應用程式中僅存在一個實體的服務。
但我對某事感到困惑。目前，我的服務如下所示：
@Injectable({
providedIn: 'root',
})
export class DataService {
data: IData = {
items: [`initial item`],
};
constructor() {}
addItem(item: string): void {
this.data.items.push(item);
console.log(`Item added!`);
}
}
在這里，我期望此服務的單個實體，而我想要做的是，創建一個帶有按鈕的組件以添加新專案，并且我期望其他組件在發生這種情況時重繪 。我知道有Subject，BehaviourSubject但是如果你看看這個問題：在 Angular 服務中頻繁使用 BehaviorSubject 是一個危險信號嗎？你會明白我不能使用行為主體來維護data我的服務中變數的狀態。
這就是為什么我選擇來實作單身希望資料傳播將作業作為next()和subscribe()從RxJS行為主體。
主要問題是：是否可以使用單例服務傳播資料？
此示例將在下面的 stackblitz 鏈接中提供。我有兩個不相關的組件：
專案組件：
<div>
<div *ngFor="let item of items">
<span>{{ item }}</span>
</div>
<button (click)="addNew()">Add New Product</button>
</div>
專案長度的組成部分：
<p>
Total of items: {{ amount }}
</p>
這兩個組件都有一個注入來訪問它們建構式中的相同服務：
constructor(private dataService: DataService) { }
一個將它們聚集在一起的組件：
<app-items></app-items>
<app-counter></app-counter>
這個主要組件也有一個提供者。
@Component({
selector: 'app-services',
...
providers: [DataService]
})
由于此組件將其他兩個組件都聚集在一起，因此我認為將提供程式放在這里會幫助我完成我想要的。
我還在app-routing.module.ts父級和子級中指定。
{
path: 'services',
component: ServicesComponent,
children: [
{
path: '',
component: ItemsComponent,
},
{
path: '',
component: CounterComponent,
}
]}
從 Items 組件添加新專案不會重繪 其他組件上的專案長度。是否可以在不使用事件發射器或行為主體且僅使用單例的情況下做到這一點？
所有這個例子都在這里，一個stackblitz，如果想看看一個測驗例子。
uj5u.com熱心網友回復：
可以做到，通過Interpolation將長度直接系結到UI。
<p>
Total of items: {{ cartService.cart.products.length }}
</p>
你做了什么：
ngOnInit() { // runs only once during initilization
console.log(`cartLL`, this.cartService.cart);
this.amount = this.cartService.cart.products.length;
// pass by value not reference so it is only updated once
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/365773.html
標籤：有角的