Блог

Главная - Вопросы по программированию - Angular 2: подписка один раз в MainComponent для всех маршрутов

Angular 2: подписка один раз в MainComponent для всех маршрутов

#angular

#angular

Вопрос:

У меня есть ProjectModule. Для каждой страницы в этом модуле требуется projectService.projectData свойство перед загрузкой.

ProjectComponent

 ngOnInit() {
this.af.auth.subscribe(auth => {
    this.route.params.forEach((params: Params) => {
    let name = params['name'];
    if (name) {
      this.projectService.getProject(name);
  }
  });
});
  }

ProjectService

 getProject(name) {
    //Friendly URL to ID
    this.af.database.object('/friendly_urls/'   name).take(1).subscribe((data) => {
      //ID to data
      this.af.database.object('/projects/'   data.$value).take(1).subscribe((projectData) => {
        this.projectData = projectData;
      });
    },
    error =>  {
      console.log(error);
      /* TODO: Permission blocked page */
      this.router.navigate(['']);
    });
  }

Я должен создать getProject(name) метод в каждом компоненте, чтобы получить данные проекта.

Как я могу убедиться, что получаю projectData от службы перед доступом к любому маршруту?

Возможно ли достичь этого без subscribe обслуживания в каждом компоненте ngOnInit ?

Комментарии:

1. Вы уже сохраняете данные в projectData свойстве сервиса. Просто получите доступ к этому свойству в ваших компонентах. т.е. export class SomeComponent { constructor(projectService: ProjectService) { } затем любым методом в компоненте, которому нужны данные, просто this.projectService.projectData . Если вы запустите getProject метод на ранней стадии процесса загрузки, данные будут доступны для приложения. Просто убедитесь, что вы не объявляете массив ProjectService в каждом модуле providers , только в главном модуле, поэтому вы работаете с одноэлементной службой.

2. Да, я сохраняю его в projectData . но когда я пытаюсь использовать ProjectData в одном из моих компонентов, я получаю, что projectData значение не определено. Я спрашиваю, как я могу избежать подписки в каждом компоненте

3. Включаете ли вы ProjectService в поставщиков каждого модуля? или просто в файле самого высокого модуля ( app.module может быть?). Если у вас есть это, скажем, в app.module , а затем в более низком модуле project.module , то вы создаете новый экземпляр службы в каждом модуле.

4.У меня это есть только в моем более высоком модуле (ProjectModule). Допустим, вы обновляете страницу по адресу /projects/my-project/users . ngOnInit() метод в моем вопросе выполнен, и времени недостаточно, пока я не получу данные, пока ProjectUserComponent ngOnInit() метод не будет выполнен с projectData .

5. Если вы вызываете getProject() один раз в ProjectComponent , то вам не нужно вызывать его снова в ProjectUserComponent . Просто ProjectUserComponent ссылайтесь на projectData свойство сервиса. Вы можете заставить его обрабатывать это как null / undefined , пока данные не вернутся с *ngIf или ? оператором, подобным {{projectData?}}