angular - 访问 Angular 中其他组件的变量

Question

我正在使用 TypeScript 在 Angular 中开发一个应用程序:

我的app.component上面有一个navigation，然后是其他组件的router-outlet

<navigation></navigation>
<router-outlet></router-outlet>

导航

@Component({
  selector: 'navigation',
  directives: [ROUTER_DIRECTIVES],
  template: `{{ HERE SHOULD BE USERNAME }}    <a [routerLink]="['Home']">Home</a> | <a [routerLink]="['Logout']">Logout</a>`
})
export class NavigationComponent {}

登录(在路由器 socket 内加载)

@Component({
    selector: 'login-component',
    templateUrl: 'app/components/login/login.html',
})
export class LoginComponent {

  username ;

  constructor(public router: Router, public http: Http) {
  }
...
}

login.component 管理登录过程。用户登录后 -> 我想在 Navigation.component 中显示其用户名。我如何将用户名从 login.component 传递给 Navigation.component ？或者如何从 Navigation.component 访问 login.component 中的变量 username ？

Answer 1

让他们都使用公共(public)服务，并将用户名存储在服务中。

登录组件将用户名存储在服务中:

userService.setUser(theUser);

导航组件允许从服务获取用户:

getUser() {
    return userService.getUser();
}

导航组件的 View 使用

{{ getUser() }}