Angular2:从其他组件调用方法或变量
Angular2: call method or variable from other component
我有 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";
}
}
使用共享服务在组件之间进行通信和共享
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])
另请参阅
我有 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";
}
}
使用共享服务在组件之间进行通信和共享
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])
另请参阅