В приложениях Angular NgRx — это мощная библиотека управления состоянием, которая помогает управлять состоянием приложения предсказуемым и масштабируемым способом. Одним из общих требований является получение данных из хранилища NgRx и их отображение в различных компонентах. В этой статье мы рассмотрим несколько методов достижения этой цели, а также примеры кода. Давайте погрузимся!

Методы доступа и отображения данных из хранилища NgRx:

1. Метод 1: подписка на магазин
   • В компонент Angular импортируйте необходимые зависимости, связанные с хранилищем NgRx.
   • Подпишитесь на магазин, используя метод select, чтобы получить нужные данные.
   • Назначьте полученные данные свойству компонента.
   • В шаблоне компонента используйте привязку данных для отображения данных.

import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { AppState } from './app.state';
@Component({
  selector: 'app-my-component',
  template: `
    <div>{{ dataFromStore }}</div>
  `
})
export class MyComponent implements OnInit {
  dataFromStore: any;
  constructor(private store: Store<AppState>) {}
  ngOnInit() {
    this.store.pipe(select(state => state.myFeature.data)).subscribe(data => {
      this.dataFromStore = data;
    });
  }
}

1. Метод 2: использование канала async
   • В шаблоне компонента используйте канал asyncдля подписки на магазин и автоматической обработки подписки и отмены подписки.
   • Назначьте нужные данные из хранилища свойству компонента.

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { AppState } from './app.state';
@Component({
  selector: 'app-my-component',
  template: `
    <div>{{ dataFromStore$ | async }}</div>
  `
})
export class MyComponent {
  dataFromStore$: Observable<any>;
  constructor(private store: Store<AppState>) {
    this.dataFromStore$ = this.store.pipe(select(state => state.myFeature.data));
  }
}

1. Метод 3: использование директивы ngIf
   • В шаблоне компонента используйте директиву ngIfдля условной визуализации определенного раздела в зависимости от доступности данных в хранилище.

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { AppState } from './app.state';
@Component({
  selector: 'app-my-component',
  template: `
    <ng-container *ngIf="dataFromStore$ | async as data">
      <div>{{ data }}</div>
    </ng-container>
  `
})
export class MyComponent {
  dataFromStore$ = this.store.pipe(select(state => state.myFeature.data));
  constructor(private store: Store<AppState>) {}
}

В этой статье мы рассмотрели несколько методов доступа и отображения данных из хранилища NgRx в компонентах Angular. Используя такие методы, как подписка на хранилище, использование канала asyncи директивы ngIf, вы можете эффективно получать и представлять данные из хранилища в своем приложении Angular. Выберите метод, который лучше всего соответствует вашим требованиям и стилю кодирования.