Angular 角度使用秋田存储ngOnInit在第一次加载时不工作

我使用秋田商店的Angular10应用程序有问题

当我在我的组件页面上启动/刷新我的应用程序时，我看到在我的组件上加载

但是，通过控制台，商店似乎加载了项目，并且在onInit中触发了my console.log

当我在他们应该加载的页面上刷新应用程序时，它不会，它只会显示“加载”。但是，如果我点击路由器链接按钮到这个页面，它就会加载

/models/post post.model.ts

export interface Post {
// fields here
}

export interface PostsState extends EntityState<Post, number> {
    posts: Post[];
    isLoaded: boolean;
}

export const getInitialState = () => {
    return {
        posts: [],
        isLoaded: false,
    };
};

@Injectable({
    providedIn: 'root'
})
@StoreConfig({name: ‘postsStore'})
export class PostsStore extends EntityStore<PostsState> {
    constructor() {
        super(getInitialState());
    }
}

@Injectable({ providedIn: 'root' })
export class PostsQuery extends QueryEntity<PostsState> {

  constructor(protected store: PostsStore) {
    super(store);
  }

  getPosts(): Observable<Post[]> {
    return this.select(state => state.posts);
  }

  getLoaded():Observable<boolean> {
    return this.select(state => state.isLoaded);
  }

  getIsLoading():Observable<boolean> {
    return this.selectLoading();
  }


}
import { ID } from '@datorama/akita';

@Injectable({ providedIn: 'root' })
export class PostsService {

  private API_URL = `${environment.apiUrl}`;


  constructor(private postsStore: PostsStore,
              private http: HttpClient) {}

  get() {
    return this.http.get<Post[]>(`${this.API_URL}/posts`)
     .pipe(
       tap(entities => this.postsStore.set(entities))
      );
  }

  add(post: Post) {
    this.postsStore.add(post);
  }

  update(id, post: Partial<Post>) {
    this.postsStore.update(id, post);
  }

ngOnInit(): void {
    console.log('STARTING'); // on page initial this shows
    this.postsQuery.getIsLoading().subscribe(res => this.loading = res);
    this.postsQuery.getPosts().subscribe(res => this.posts = res);
    this.postsQuery.getLoaded().pipe(
      take(1),
      filter(res => !res),
      switchMap(() => {
        this.postsStore.setLoading(true);
        console.log(‘TEST ‘A); // on page initial this shows
        return this.postsService.get();
      })
      ).subscribe(res => {
        this.postsStore.update(state => {
          console.log(‘TEST ‘B); // on page initial this shows
          return {
            posts: res
          };
        });
        this.postsStore.setLoading(false);
        console.log(‘TEST’ C);  // on page initial this shows
      }, err => {
        console.log(err);
        this.postsStore.setLoading(false); 
        console.log(‘TEST ‘D); // This does not show
      });
  }

/stores/post post.store.ts

export interface Post {
// fields here
}

export interface PostsState extends EntityState<Post, number> {
    posts: Post[];
    isLoaded: boolean;
}

export const getInitialState = () => {
    return {
        posts: [],
        isLoaded: false,
    };
};

@Injectable({
    providedIn: 'root'
})
@StoreConfig({name: ‘postsStore'})
export class PostsStore extends EntityStore<PostsState> {
    constructor() {
        super(getInitialState());
    }
}

@Injectable({ providedIn: 'root' })
export class PostsQuery extends QueryEntity<PostsState> {

  constructor(protected store: PostsStore) {
    super(store);
  }

  getPosts(): Observable<Post[]> {
    return this.select(state => state.posts);
  }

  getLoaded():Observable<boolean> {
    return this.select(state => state.isLoaded);
  }

  getIsLoading():Observable<boolean> {
    return this.selectLoading();
  }


}
import { ID } from '@datorama/akita';

@Injectable({ providedIn: 'root' })
export class PostsService {

  private API_URL = `${environment.apiUrl}`;


  constructor(private postsStore: PostsStore,
              private http: HttpClient) {}

  get() {
    return this.http.get<Post[]>(`${this.API_URL}/posts`)
     .pipe(
       tap(entities => this.postsStore.set(entities))
      );
  }

  add(post: Post) {
    this.postsStore.add(post);
  }

  update(id, post: Partial<Post>) {
    this.postsStore.update(id, post);
  }

ngOnInit(): void {
    console.log('STARTING'); // on page initial this shows
    this.postsQuery.getIsLoading().subscribe(res => this.loading = res);
    this.postsQuery.getPosts().subscribe(res => this.posts = res);
    this.postsQuery.getLoaded().pipe(
      take(1),
      filter(res => !res),
      switchMap(() => {
        this.postsStore.setLoading(true);
        console.log(‘TEST ‘A); // on page initial this shows
        return this.postsService.get();
      })
      ).subscribe(res => {
        this.postsStore.update(state => {
          console.log(‘TEST ‘B); // on page initial this shows
          return {
            posts: res
          };
        });
        this.postsStore.setLoading(false);
        console.log(‘TEST’ C);  // on page initial this shows
      }, err => {
        console.log(err);
        this.postsStore.setLoading(false); 
        console.log(‘TEST ‘D); // This does not show
      });
  }

视觉/ visual.component.html

<div *ngIf="loading">
<p>
  LOADING
</p>
</div>   



<div *ngIf="!loading">
<div *ngFor="let post of posts>
{{post.name}}
<div>
</div>

加载

最好在stackblitz上有这个例子来尝试一下（如果不进行调试，很难解决这个问题）

另外，我建议尝试将
console.log
添加到
this.postsQuery.getIsLoading（）
订阅中，以便更好地调试它

但是，目前我看到两种选择：

尝试在
this.postsQuery.getIsLoading（）订阅中添加
changeDetectorRef.detectChange（）


问题可能与此问题有关（参见stackblitz示例），其根本原因是在商店订阅中同步更新商店


修复它的方法是延迟
this.postsStore.setLoading（true）（您可以尝试将其放入
setTimeout（）
或添加一些rxjs操作符）