Angular. Объясни организацию шаринга данных между компонентами: Observable Data Services, ngstore
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class MovieService {
constructor(private http: HttpClient) {}
getMovies(): Observable<any> {
return this.http.get('https://api.movies.com/movies');
}
}
Теперь можем инжектировать этот сервис в любой компонент, который должен получить доступ к списку фильмов:
import { Component, OnInit } from '@angular/core';
import { MovieService } from './movie.service';
@Component({
selector: 'app-movie-list',
templateUrl: './movie-list.component.html',
styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {
movies: any[];
constructor(private movieService: MovieService) {}
ngOnInit() {
this.movieService.getMovies().subscribe(movies => {
this.movies = movies;
});
}
}
В этом примере мы инжектировали сервис `MovieService` в компонент `MovieListComponent` и подписались на Observable `getMovies()`. Когда данные будут получены с сервера, список фильмов будет сохранен в `movies`, который будет использоваться в шаблоне для отображения.
Еще одним способом организации шаринга данных является использование ngstore. Ngstore является реализацией паттерна хранилища данных. Он содержит в себе всё состояние нашего приложения и предоставляет различным частям приложения доступ к этому состоянию.
Ngstore содержит Store - экземпляр класса, который хранит в себе все данные и внутри которого происходит их изменение. Например, создадим хранилище для списка фильмов:
import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
@Injectable()
export class MovieStore {
constructor(private store: Store<any>) {}
getMovies() {
return this.store.select('movies');
}
addMovie(movie: any) {
this.store.dispatch({ type: 'ADD_MOVIE', payload: movie });
}
}
Затем, можем использовать этот Ngstore в любом компоненте, который должен получить доступ к списку фильмов:
import { Component, OnInit } from '@angular/core';
import { MovieStore } from './movie.store';
@Component({
selector: 'app-movie-list',
templateUrl: './movie-list.component.html',
styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {
movies: any[];
constructor(private movieStore: MovieStore) {}
ngOnInit() {
this.movieStore.getMovies().subscribe(movies => {
this.movies = movies;
});
}
addMovie() {
const movie = { title: 'New movie', year: 2019 };
this.movieStore.addMovie(movie);
}
}
В этом примере мы инжектировали Ngstore `MovieStore` в компонент `MovieListComponent` и подписались на Observable `getMovies()`. Когда данные будут изменены с помощью метода `addMovie()`, все подписанные компоненты автоматически получат обновленные данные.
Таким образом, Angular предоставляет различные способы организации шаринга данных между компонентами, включая использование Observable Data Services и ngstore. Каждый из этих способов имеет свои особенности и может быть выбран в зависимости от конкретных требований проекта.Нажимая «Регистрация» или «Войти через Google», вы соглашаетесь с Публичной офертой, даете Согласие на обработку персональных данных, а также подтверждаете что вам есть 18 лет
Нажимая «Регистрация» или «Войти через Google», вы соглашаетесь с Публичной офертой, даете Согласие на обработку персональных данных, а также подтверждаете что вам есть 18 лет