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

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

0 голосов
/ 13 мая 2018

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

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

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 я загружаю свои данные в локальные переменные, но как только я перехожу на другую страницу, а затем возвращаюсь, данные исчезают. Мне буквально нужно обновить страницу, чтобы перезагрузить данные.

Как мне решить эту проблему?

1 Ответ

0 голосов
/ 13 мая 2018

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

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

Но если вы хотите реализовать инъекционную службу с кешем, посмотритев коде в data.resolver2.ts и data.service.ts.

...