角度2更新应用程序组件从路由器出口组件-Java 学习之路

我正在使用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注入app组件并订阅ngOnInit中的事件

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

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

当我导航到我的'/ login'路由页面/组件时，我的loginService是注入，loginService定义了一个事件

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

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

this.loginSuccess.next(response);

我能够在订阅的loginSucess上的app组件中设置断点，并且数据被传递，但是'this'是未定义的 .

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

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

2 回答

不确定你的意思是“并传递数据” .

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

在路由器添加的组件（ LoginComponent ）中没有做任何事情 . 不支持路由组件中的 @Input() 和 @Output() .

只需将 LoginService 注入路由组件，然后使用登录组件中的observable发出事件 .

@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);
  }
}

回复于 2024-04-27T01:07:44+08:00

0
这似乎可以解决我的问题：将事件从子节点传递到使用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已经改变了一些东西
回复于 2024-04-27T01:07:44+08:00

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

2 回答

相关问题