Снова о глобальных данных в Angular2

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

Вывести события, использовать входы выходы - это angular2 способ? Данные должны передаваться от дочернего к родительскому корню, а затем от родителя к дочернему до точки? Я новичок здесь и часто хотел бы иметь какой-то глобальный объект, где я могу хранить некоторую информацию, которую все компоненты должны знать. Когда данные изменяются в этом глобальном объекте, он должен быть волшебным образом изменен во всех других сервисах и компонентах, которые он ввел. Например, вход в систему пользователя/выход из системы, или если он нажимает кнопку и т.д.

import {Injectable} from 'angular2/core';

@Injectable()
export object Globals {
    logged: false,
    showThatDiv: true
}

Но я где-то читал, что это метод Angular1, а не angular2. Это правильно? Или я ошибаюсь? Это не похоже на глобальный суп, просто глобальный объект состояния.

Например, теперь у меня есть эта структура:

|-root
  |-google api component
    |-google auth
    |-youtube api
      |-playlists
      |-video
  |-myComponent
    |-sub1
      |-sub2
        |-sub3
  |...

Компонент mySub1 должен знать, зарегистрирован ли пользователь, и если да, покажите (* ngIf) некоторый div в sub2. Или из компонента mySub3 call checkGauth() в службе googleAuth. Из компонента mySub2 добавьте видео в список воспроизведения YouTube и onAdded show results в sub2, или из sub3 создайте новый список воспроизведения и покажите его на суб2. Много вариантов.

Я устал писать код для всего этого. Это делает его более сложным. И иногда думают об этом:

 |-root
   |-google api component
   |-google auth
   |-youtube api
   |-playlists
   |-video
   |-myComponent
   |-sub1
   |-sub2
   |-sub3
   |...

Ответы

Ответ 1

Создание служб для каждого из ваших API - отличный способ изолировать компоненты от путаницы. В вашем случае вам нужно создать GoogleService, который может содержать ваш контекст в текущем состоянии приложения. Службы являются Inject-доступными для ваших компонентов, когда и где они необходимы.

Сказав, что нет тонкой линии, мы можем сделать в некоторых случаях. В этих случаях

  • Передача сообщений. Передавайте данные через ваши компоненты, в вашем случае, если родитель знает о входе и ребенок хочет знать о входе в систему, пропустите его и привязки будут сохраняться он обновлен для надежного использования его на ваших дочерних компонентах.

  • Создать помощник, который инкапсулирует все ваши функции, связанные с вашей функцией. Обращайтесь к нему, используя импорт старой моды и используйте его на своих компонентах.

Вывести события, использовать входы выходы - это angular2 способ?

Да, это лучший способ узнать, что нужно вашим компонентам, и компоненты испускают. Но это не сложно, привязка двухсторонних данных позволяет вам работать с минимальными усилиями.

Данные должны передаваться от дочернего элемента к родительскому корню, а затем из от родителей к ребенку?

Пусть ребенок получает данные из родительского элемента через входы и возвращает результат в качестве обратных вызовов, Оформить этот блог, чтобы узнать, как это делается в приложении реального мира.

Надеюсь, это поможет вам начать. Добро пожаловать в Angular 2, вам понравится здесь!