3

我正在研究 Angular 2，其中我有应用程序组件，它加载其他组件路由器插座并且还具有登录组件的链接。但我想要保存一些全局变量的方法，这些变量可以在我的应用程序组件和登录组件上访问，以便我可以隐藏和显示登录链接。

这是我的应用程序组件：

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

登录后，我必须设置一些变量，我可以在应用程序组件上访问以隐藏和显示登录链接，也可以在需要的其他组件上访问。

4

1 回答 1

2

使用服务，如使用 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();
}
于 2016-01-11T16:48:00.347 回答