在我的项目中,我按照此tutorial实施了Angular Observable Data Services。实际上,我面临着两个对象之一的刷新问题:Theme
对象在没有问题的情况下直接刷新了Theme component
,而与我的{{1 }},仅在topbar component
上刷新,而不在Category
中直接刷新。我需要返回主页刷新我的Category component
。
在我的模型实现下面:
topbar component
我的topbar component
:
export class Theme {
_id: string;
name: string;
description: string;
iconCode: string;
categories: Category[];
createdAt: Date;
updatedAt: Date;
export class Category {
_id: string;
name: string;
description: string;
createdAt: Date;
updatedAt: Date;
我的CategoryStoreService
:
export class CategoryStoreService {
private _categories: BehaviorSubject<Category[]> = new BehaviorSubject<Category[]>([]);
private dataStore: {
categories: Category[]
};
constructor(private categoryBackendService: CategoryBackendService) {
this.dataStore = { categories: [] };
this._categories = new BehaviorSubject<Category[]>([]);
}
get categories() {
return this._categories.asObservable();
}
addThemeCategory(themeId: string, category: Category) {
this.categoryBackendService.addThemeCategory(themeId, category).subscribe(
res => {
this.dataStore.categories.push(res);
this._categories.next(Object.assign({}, this.dataStore).categories);
},
err => console.log('Error creating the category')
);
}
我通过以下代码在ThemeStoreService
中订阅了export class ThemeStoreService {
private _themes: BehaviorSubject<Theme[]> = new BehaviorSubject<Theme[]>([]);
private dataStore: {
themes: Theme[]
};
constructor(private themeBackendService: ThemeBackendService) {
this.dataStore = { themes: [] };
this._themes = new BehaviorSubject<Theme[]>([]);
}
get themes() {
return this._themes.asObservable();
}
/**
* Get the themes and their categories from the server and load it to the
* data store
*/
getThemes() {
this.themeBackendService.getThemes().subscribe(
res => {
this.dataStore.themes = res;
this._themes.next(Object.assign({}, this.dataStore).themes);
},
err => console.log("Error retrieving the themes")
);
}
:
ThemeStoreService
及其模板:
app.component.ts
并且由于我订阅了export class AppComponent implements OnInit {
themes$: Observable<Theme[]>;
constructor(private themeStoreService: ThemeStoreService) { }
ngOnInit() {
// Subscribe to the themes
this.themes$ = this.themeStoreService.themes;
// Load all the themes
this.themeStoreService.getThemes();
}
,该主题通过主题数据模型中的字段<app-topbar [themes]="themes$ | async"></app-topbar>
<router-outlet></router-outlet>
链接到我的Theme
,因此视图不应该在我的视图中自动更新顶部栏?
顶部栏是一个愚蠢的组件,它通过@Input()属性接收Category
并显示带有以下代码的主题和类别:
categories
.ts文件
themes
我该如何解决这个问题?
预先感谢您的帮助。
答案 0 :(得分:0)
您的问题是您的子组件正在声明:
@Input() themes: Theme[];
您的父组件正在传递异步可观察流:
<app-topbar [themes]="themes$ | async"></app-topbar>
其中themes$
的位置键入为Observable
。
[themes]="themes$ | async"
在自定义输入指令中不起作用。您需要使用Observable
从Subscription
themes $ 中手动提取数据,然后传递数据:
import { ..., OnInit, OnDestroy } from ... //psuedo-code, add OnDestroy
import { ..., Subscription } from 'rxjs'; // psuedo-code, add Subscription
export class AppComponent implements OnInit, OnDestroy {
themes: Theme[];
themesSub: Subscription;
constructor(private themeStoreService: ThemeStoreService) { }
ngOnInit() {
// Subscribe to the themes
this.themesSub = this.themeStoreService.themes.subscribe({ data => this.themes = data });
// Load all the themes
this.themeStoreService.getThemes();
}
ngOnDestroy() {
this.themesSub.unsubscribe();
}
不要忘记更改html:<app-topbar [themes]="themes"></app-topbar>