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

Angular2: call method or variable from other component

提问by Micha? Wojas

I have 3 components. PageMenu, LoginSessionand LoginForm. In PageMenuI want to have access to variable from LoginSession, then when I have it I can maintain behaviour of LoginFormwhich is also imported to PageMenu

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

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

LoginSession:

登录会话：

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

LoginForm:

登录表单：

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

回答by Günter Z?chbauer

Use a shared service to communicate and share between components

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

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

  ...

}

The LoginFormcan access the value the same way.

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

Register it only in bootstrap()to get oneapplication-wide instance:

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

bootstrap(AppComponent, [LoginService])

See also Global Events in Angular 2

另请参阅 Angular 2 中的全局事件