我正在研究 Angular 2,其中我有 app 组件加载其他组件 router-outlet 并且还有登录组件的链接。但我想要保存一些全局变量的方法,它可以在我的app组件和login组件上访问,这样我就可以隐藏和显示登录链接。
这是我的应用组件:
import {Component, View, Inject} from 'angular2/core';
import {NgIf} from 'angular2/common';
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS} from 'angular2/router';
import {HomeComponent} from '../home/home';
import {LoginComponent} from '../login/login';
@Component({
selector: 'app',
})
@View({
templateUrl: '/scripts/src/components/app/app.html',
directives: [RouterLink, RouterOutlet, NgIf]
})
export class App {
constructor(
@Inject(Router) router: Router
) {
this.devIsLogin=false;
router.config([
{ path: '', component: HomeComponent, as: 'Home' },
{ path: '/login', component: LoginComponent, as: 'Login' }
]);
}
}
这是我的登录组件
///<reference path="../../../node_modules/angular2/typings/node/node.d.ts" />
import {Component, View, Inject} from 'angular2/core';
import {FormBuilder, FORM_DIRECTIVES } from 'angular2/common';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {LoginService} from '../../services/loginService';
import {Router} from 'angular2/router';
@Component({
selector: 'login',
providers: [HTTP_PROVIDERS]
})
@View({
templateUrl: '/scripts/src/components/login/login.html',
directives: [FORM_DIRECTIVES]
})
export class LoginComponent {
userName: string;
password: string;
showError: boolean;
constructor(
@Inject(LoginService) private loginService: LoginService,
@Inject(Router) private router: Router
) {
this.userName = '';
this.password = '';
this.showError = false;
}
login() {
var data = {
userName: this.userName,
password: this.password
}
this.loginService.login(data, (res) => {
this.showError = false;
// and then we redirect the user to the home
this.router.parent.navigate(['/Home']);
}, (err) => {
this.showError = true;
});
}
}
登录后,我必须设置一些变量,我可以在应用程序组件上访问这些变量以隐藏和显示登录链接,也可以在其他任何需要的组件上访问。
最佳答案
使用 updating variable changes in components from a service with angular2 中所示的服务
将其添加到 bootstrap(AppElement, [..., NameService]);
中,并向组件的构造函数中添加一个 nameService: NameService
参数访问值。
@Injectable()
class NameService {
name: any;
nameChange: EventEmitter = new EventEmitter();
constructor() {
this.name = "Jack";
}
change(){
this.name = "Jane";
this.nameChange.emit(this.name);
}
}
...
var _subscription;
constructor(public nameService: NameService) {
this.name = nameService.name;
_subscription = nameService.nameChange.subscribe((value) => {
this.name = value;
});
}
ngOnDestroy() {
_subscription?.unsubscribe();
}
关于angular - angular2 中的全局数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34726770/