我正在使用 TypeScript 在 Angular 中开发一个应用程序:
我的app.component
顶部有一个导航,然后是其他组件的路由器导出
<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
?
最佳答案
让它们都使用通用服务,并将用户名存储在服务中。
登录组件将用户名存储在服务中:
userService.setUser(theUser);
导航组件允许从服务获取用户:
getUser() {
return userService.getUser();
}
导航组件的 View 使用
{{ getUser() }}
关于angular - 访问 Angular 中其他组件的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35782687/