Угловое 2 обновление компонентов приложения от выпускного маршрутизатора компонента

Question

Я использую угловой 2 rc1 и новый маршрутизатор @ угловой/маршрутизатор

В приложении компонента У меня есть раздел нав и выход маршрутизатора

<nav> 
    <a *ngIf="auth?.userName == null" [routerLink]="['/login']">Login</a> 
    <a *ngIf="auth?.userName != null" (click)="logout()">Logout</a> 
    {{auth?.userName}} 
</nav> 
<router-outlet></router-outlet> 

I впрыснуть loginService в приложении компонент и подписаться на событие в ngOnInit

ngOnInit() { 
    this.loginService.loginSuccess.subscribe(this.loginSuccess); 

} 
ngOnDestroy() { 
    this.loginService.loginSuccess.unsubscribe(); 
} 
private loginSuccess(res: IAuthResponse) { 
    this.auth = res; 
} 

, когда я перейти к моей «/ вход в системе» маршрута странице/компонент моего loginService является инъекционным и loginService определяет событие

@Output() loginSuccess = new EventEmitter<IAuthResponse>(); 

и после успешного входа в моей службе, служба Логина вызывает событие

this.loginSuccess.next(response); 

Я могу установить точку останова в приложении компонента на подписном loginSucess и передаются данные Вместе с тем, «это» не определено.

private loginSuccess(res: IAuthResponse) { 
    this.auth = res; //this is undefind 
} 

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

Answer 1

Не уверен, что вы имеете в виду «а данные передаются».

@Output() loginSuccess = new EventEmitter<IAuthResponse>(); 

в компоненте добавленного маршрутизатора (LoginComponent) ничего не делает. @Input() и @Output() в маршрутизированных компонентах не поддерживаются.

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

@Injectable() 
export class LoginService { 
    changes:BehaviorSubject = new BehaviorSubject(false); 
} 

export class LoginComponent { 
    constructor(private loginService:LoginService) {} 

    onLogin() { 
    this.loginService.changes.next(true); 
    } 
} 

export class NavComponent { 
    constructor(private loginService:LoginService) {} 

    onLogin() { 
    this.loginService.changes.subscribe(status => this.isLoggedIn = status); 
    } 
} 

Answer 2

Это похоже, что это может быть решением моей проблемы: передача событий от ребенка к родителю, который использует маршрутизатор-выход, однако он выглядит как RC1 изменилось, как BehaviorSubject работает. Используя описанный выше метод:

changes:BehaviorSubject = new BehaviorSubject(false); 

дает ошибку говоря BehaviorSubject нуждается в декларации типа, поэтому я попытался как

changes:BehaviorSubject<boolean> = new BehaviorSubject(false); 
    as well as 
changes:BehaviorSubject<any> = new BehaviorSubject(false); 

и отлично компилируется, но при запуске приложения, оно дает шаблонным ошибка:

zone.js:323 SyntaxError: Unexpected token < 
Evaluating http://localhost:3000/node_modules/rxjs/index.js 
Error loading http://localhost:3000/app/main.js 
at SystemJSLoader.__exec 
(http://localhost:3000/node_modules/systemjs/dist/system.src.js:1395:16) 
at entry.execute 

Я предполагаю, что что-то изменилось с rxjs и BehaviorSubject