javascript - angular2组件传值
本文介绍了javascript - angular2组件传值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
上面是我的页面的入口代码,top是顶部logo显示部分,slider是我的左侧菜单,main中是我具体的页面。
我的页面是管理系统类型的,所以当为login路径时,我希望左侧的slider是不显示的(isLogon为false),那么假如我在login页面登录成功了,我如何使登录成功的状态传递给页面入口的isLogon属性值为true,使slider显示?
解决方案
假设你有一个login service
import { Injector, Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
@Injectable()
export class LoginService{
public isLogined: boolean;
private changes: Subject<any> = new Subject<any>();
constructor() {
}
isLogined(isLogined: boolean): void {
this.isLogined = isLogined;
this.changes.next(this.isLogined);
}
}
然后在你的页面中
import { Component, Input, Output, EventEmitter, OnInit, OnChanges, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { LoginService } from './login.service';
@Component({
selector: 'myApp',
template: `
<slider *ngIf="this._loginService.isLogined"></slider>
`
})
export class myApp {
constructor(private _loginService: LoginService) {
}
}
将slider的 *ngIf绑定的 loginservice.isLogined 属性。
然后你就可以在登陆成功处,设置 _loginService.isLogined(true);
这样每次当你login成功后,状态就会通知到slider啦。
这里主要用到RxJS的Subject.
有什么问题可以继续提问。
这篇关于javascript - angular2组件传值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文