Angular2 одно компонентное триггерное событие, а другое подписаться и выполнить некоторые задачи

Question

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

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

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

Структура страницы как таковой:

Заголовок

левой боковой панели

Main Content -> где компоненты маршрута нагрузки

Footer

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

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

любые предложения?

Answer 1

создайте услугу LoginData и предоставьте ее в своем бутстрапе. Служба будет иметь следующие поля:

loggedIn$: Subject<boolean> = new BehavioralSubject<boolean>(false); 
loginData$: Subject<any> = new BehavioralSubject<any>({}); // in case you want to pass specific data 

loginSuccessful(data: any): void { 
    this.loggedIn$.next(true); 
    this.loginData$.next(data); 
} 

затем, в вашем NavbarComponent, вводят услугу Логин:

constructor(private loginSvc: LoginData){} 

и в вашем HTML использовать данные службы, например:

<button type="button" (click)="..." *ngIf="loginSvc.loggedIn$ | async">my profile</button> 

или если вы хотите использовать конкретные данные:

<span *ngIf="loginSvc.loggedIn$ | async">user {{(logindSvc.loginData$ | async).name}}</span> 

Теперь в вашем логин-обработчике:

this.http.get('/login', JSON.stringify(loginPayload)) 
    .map(response => response.json()) 
    .subscribe(loginData => this.loginSvc.loginSuccessful(loginData));