Обмен данными между компонентами или модулями через сервис? - PullRequest
Новая
       9

Обмен данными между компонентами или модулями через сервис?

0 голосов
/ 21 апреля 2020

Я относительно новичок в Angular 8 и работаю над переносом приложения с AngularJS на эту новую версию. Раньше вы могли $broadcast пунктов на контроллерах. Я пытаюсь сделать что-то очень похожее сейчас, но могу использовать еще несколько направлений / помощи.

Редактировать: Я прошу прощения, если этот вопрос кажется неполным, я пытаюсь изучить учебники и руководства, поэтому, пожалуйста, предоставьте любые / все отзывы для любых дополнительных пунктов, которые я могу указать.

В моем главном основном app.component.ts У меня есть следующий код: 

export class AppComponent {

  searches: any = [];

  @ViewChild('mylist', {static: false})mylist: IonList;

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private storage: Storage,
    private userSearches: UserSearches,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.loadItems();
    });
  }

  loadItems() {
    this.userSearches.getAllSearches().then(values => {
      this.searches = values;
    });
  }
}

Вот часть моего app.component.html, которая использует searches: 

       <ion-list lines="full" #mylist>
          <ion-list-header>
            Recent List
          </ion-list-header>

          <ion-item *ngFor="let item of searches">
            <ion-label>{{item}}</ion-label>
          </ion-item>
        </ion-list>

В моем основном компоненте приложения пользователи могут искать новые элементы, например: 

export class HomePage {

  showSearchbar: false;
  searchTerm: string = '';
  results: Observable<any>;

  constructor(
    private userSearches: UserSearches
  ) {}

  ngOnInit() { }

  searchByKeyword() {
    this.userSearches.addSearch(this.searchTerm).then(values => {
      console.log(values);
    });
  }
}

Используя этот шаблон: 

<ion-toolbar>
    <ion-searchbar [(ngModel)]="searchTerm" (search)="searchByKeyword($event)" placeholder="Search"></ion-searchbar>
  </ion-toolbar>

Основы приложения работают правильно, и мои Служба UserSearches собирает и хранит данные, как и ожидалось. Однако, когда вводится новый searchTerm, я бы хотел, чтобы app.component.html обновлялся с новой строкой поиска, затем при следующей перезагрузке страницы / приложения появится строка поиска.

Есть какие-нибудь указатели на то, как я могу синхронизировать данные c между компонентами?

...