Angular5: ngOnInit вызывается только один раз при маршрутизации

У меня есть это базовое приложение, в котором я получаю данные из хранилища данных с помощью службы данных. У меня есть несколько страниц (компоненты), команды, игроки, статистика...

например, компонент моей команды:

import { Component, OnInit } from '@angular/core';
import { TeamsService } from '../../services/teams.service';
import { Team } from '../../models/team';
import {Observable} from 'rxjs/Observable';


@Component({
  selector: 'app-teams',
  templateUrl: './teams.component.html',
  styleUrls: ['./teams.component.css']
})
export class TeamsComponent implements OnInit {


  public teams: Team[];
  editState: boolean = false;
  teamToEdit: Team;
  showAdd: boolean = false;
  showSelect: boolean = false;
  selectedTeam: Observable<Team>;

  constructor(public teamsService: TeamsService) {
  }

  ngOnInit() {

          this.teamsService.getTeams().subscribe(teams => {
            this.teams = teams;
            console.log('ngOnInit invoked');
          });
        }


  deleteTeam(event, team) {
    const response = confirm('are you sure you want to delete?');
    if (response) {
      this.teamsService.deleteTeam(team);
    }
    return;
  }

  editTeam(event, team) {
    this.editState = !this.editState;
    this.teamToEdit = team;
  }

  updateTeam(team) {
    this.teamsService.updateTeam(team);
    this.teamToEdit = null;
    this.editState = false;
  }

  showAddForm() {
      this.showAdd = !this.showAdd;
    }

  getTeam(event, team) {
    this.showSelect = !this.showSelect;
    this.selectedTeam = this.teamsService.getTeamById(team.id);
  }
}

В ngOnInit я загружаю свои данные в локальные переменные, но как только я перехожу на другую страницу, а затем возвращаюсь, данные исчезают. Мне буквально нужно обновить страницу, чтобы перезагрузить данные.

Как мне это решить?


person WestMD    schedule 13.05.2018    source источник
comment
Этот хук жизненного цикла срабатывает только при первой инициализации компонента, см. angular.io/guide/lifecycle-hooks для подробностей.   -  person jonrsharpe    schedule 13.05.2018
comment
поместите console.log вне подписки, чтобы увидеть, действительно ли он не вызывается или это проблема со службой.   -  person Turo    schedule 13.05.2018
comment
Создайте общую службу и внедрите ее в свойство providers ngmodule после этой службы импорта в component, после чего вам не нужно обновлять всю страницу для загрузки данных.   -  person Sanoj_V    schedule 13.05.2018
comment
Вам нужно создать глобальную службу данных, чтобы получить вышеуказанный результат.   -  person edrich13    schedule 13.05.2018


Ответы (1)


Создайте защиту распознавателя и используйте ее в конфигурации маршрута для TeamsComponent. Кроме того, создайте службу, которая будет извлекать данные и внедрять их в преобразователь. Эта служба может либо делать новый запрос данных каждый раз, когда пользователь переходит к этому маршруту, либо кэшировать данные и предоставлять их вашему TeamComponent при каждом последующем посещении маршрута.

Взгляните на этот пример приложения, который иллюстрирует общее использование защиты распознавателя: https://github.com/Farata/angulartypescript/tree/master/code-samples/chapter4/router-advanced-samples/src/app/resolver .

Но если вы хотите реализовать внедряемый сервис с кешем, взгляните на код в data.resolver2.ts и data.service.ts.

person Yakov Fain    schedule 13.05.2018
comment
спасибо за ваше решение, но не могли бы вы немного подробнее рассказать о конкретных шагах? У меня уже есть служба, которая собирает данные из хранилища ` ` - person WestMD; 13.05.2018
comment
В моем DataService я читаю большой файл размером 48 МБ в переменную myData, которая служит кешем github.com/Farata/angulartypescript/blob/master/code-samples/. Когда пользователь впервые перейдет к моему компоненту данных, служба прочитает этот большой файл. Но если я перейду к другому маршруту, а затем вернусь к DataComponent, оператор if в службе увидит, что myData не является ложным, и вернет свои данные без повторного чтения файла. - person Yakov Fain; 13.05.2018
comment
Если я хорошо понимаю, вы кешируете данные и проверяете, есть ли они. Если это так, вы не загружаете его снова. Из того, что я вижу, мой вопрос отличается. Я внедряю службу данных в свой компонент, я кэширую данные в this.teams, но когда я перехожу на другую страницу и возвращаюсь, данные исчезают. Пытался решить эту проблему с помощью других хуков жизненного цикла, но все они, похоже, вызываются только один раз при создании. Я что-то пропустил здесь? - person WestMD; 15.05.2018
comment
Да, вы упускаете из виду тот факт, что я кэширую данные в одноэлементной службе, которая сохраняется при создании и уничтожении компонентов. - person Yakov Fain; 16.05.2018