Question

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

我的<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 {}

导航

@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管理登录程序。用户登录后 - ＆gt;我想在Navigation.component中显示其用户名。如何将用户名从login.component传递给username？或者如何从login.component？

访问Navigation.component内的变量{{1}}

Answer 1

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

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

userService.setUser(theUser);

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

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

导航组件的视图使用

{{ getUser() }}

访问Angular中其他组件的变量

1 个答案: