angular 2 从路由器出口组件更新应用程序组件

Question

我正在使用 angular 2 rc1 和新路由器 @angular/router

在应用程序组件中，我有一个导航部分和路由器出口

<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>

我将 loginService 注入应用程序组件并在 ngOnInit 中订阅一个事件

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

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

当我导航到我的“/login”路由时 page/component 我的 loginService 被注入并且 loginService 定义了一个事件

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

在我的服务中成功登录后，登录服务引发事件

this.loginSuccess.next(response);

我可以在订阅的 loginSucess 上的应用程序组件中设置断点并传递数据，但是 'this' 未定义。

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

如何根据路由器插座中托管的组件中使用的服务触发的事件更新应用程序组件

Answer 1

不确定 "and the data is passed" 是什么意思。

@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

这看起来可能是我的问题的解决方案：使用 router-outlet 将事件从子级传递到父级，但是看起来 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 发生了一些变化

angular 2 从路由器出口组件更新应用程序组件

angular 2 update app component from router outlet component

angular2-routing

angular2-services

angular