Angular2：从其他组件调用方法或变量

Question

我有 3 个组件。 PageMenu、LoginSession 和 LoginForm。在PageMenu 中，我想从LoginSession 访问变量，然后当我拥有它时，我可以保持LoginForm 的行为，它也被导入到PageMenu

页面菜单：

import {Component} from 'angular2/core';
import {LoginSession} from 'app/widgets/login-session/login-session';
import {LoginForm} from 'app/widgets/login-form/login-form';

@Component({
    selector: 'page-menu',
    templateUrl: 'app/widgets/page-menu/page-menu.html',
    directives: [ROUTER_DIRECTIVES, LoginSession, LoginForm]
})

export class PageMenu {

    loginFormVisible:boolean;

    constructor(private _router:Router) {
        this.loginFormVisible = false;
    }

    onClickNavbar(page) {
        this._router.navigate([page]);
    }

    triggerLoginForm() {
        this.loginFormVisible = LoginSession.loginFormVisibility;
    }
}

登录会话：

import {Component} from 'angular2/core';

@Component({
    templateUrl: 'app/widgets/login-session/view/login-session.html',
    selector: 'login-session'
})
export class LoginSession {
    state:string;
    message:string;
    loginFormVisibility:boolean;

    constructor() {
        this.state = 'guest';
        this.message = 'Zaloguj się';
    }

    onClick() {
        switch (this.state) {
            case 'guest':
            {
                this.triggerLoginForm();
                break;
            }
        }
    }

    triggerLoginForm() {
        this.loginFormVisibility = !this.loginFormVisibility;
    }
}

登录表单：

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES,FormBuilder, Validators, ControlGroup, Control, NgClass} from 'angular2/common';
import {Output} from "angular2/core";

@Component({
    templateUrl: 'app/widgets/login-form/view/login-form.html',
    selector: 'login-form',
    directives: [FORM_DIRECTIVES]
})
export class LoginForm {
    state:string;
    message:string;


    loginForm:ControlGroup;
    login:Control = new Control("", Validators.required);
    password:Control = new Control("", Validators.required);


    constructor(formBuilder:FormBuilder) {
        this.loginForm = formBuilder.group({
            'login': this.login,
            'password': this.password,
        });
        console.log('LoginFORM!');
    }

    onSubmit() {
        document.cookie = "sessionId=123456789";
    }
}

Answer 1

使用共享服务在组件之间进行通信和共享

export class LoginService {
  public loginChanged: EventEmitter<bool> = new EventEmitter<bool>();
}  

export class PageMenu {

  loginFormVisible:boolean;

  constructor(private _router:Router, private _loginService:LoginService) {
    this.loginFormVisible = false;
    this._loginService.loginChanged.subscribe(value => {this.loginFormVisible = !value;})
  }

  ...

}

LoginForm 可以以相同的方式访问该值。

export class LoginSession {
  state:string;
  message:string;
  loginFormVisibility:boolean;

  constructor(private _loginService:LoginService) {
    this.state = 'guest';
    this.message = 'Zaloguj się';
  }

  onClick() {
    switch (this.state) {
      case 'guest':
      {
        this.triggerLoginForm();
        break;
      }
    }
  }

  triggerLoginForm() {
    this.loginFormVisibility = !this.loginFormVisibility;
    this._loginService.loginChanged.next(this.loginFormVisibility);
  }
}

只在bootstrap()注册它以获得一个应用程序范围的实例：

bootstrap(AppComponent, [LoginService])

另请参阅 Global Events in Angular 2