typescript Angular2:从其他组件调用方法或变量
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/35253126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2: call method or variable from other component
提问by Micha? Wojas
I have 3 components. PageMenu
, LoginSession
and LoginForm
. In PageMenu
I want to have access to variable from LoginSession
, then when I have it I can maintain behaviour of LoginForm
which 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 LoginForm
can 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 中的全局事件