加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular2 – 多个组件中的’watch’提供程序属性

发布时间:2020-12-17 07:14:24 所属栏目:安全 来源:网络整理
导读:我来自NG1环境,目前我正在创建具有所有可用功能的NG2应用程序.在问我之前我正在探索google和stackoverflow问题,但没有运气,因为angular 2移动得如此之快,api架构和大多数答案都已过时. 我的情况: 我有属性用户的Auth提供者(服务),我想观察用户并对多个组件
我来自NG1环境,目前我正在创建具有所有可用功能的NG2应用程序.在问我之前我正在探索google和stackoverflow问题,但没有运气,因为angular 2移动得如此之快,api架构和大多数答案都已过时.

我的情况:
我有属性用户的Auth提供者(服务),我想观察用户并对多个组件做出反应(导航栏,侧栏等)

我尝试了什么:

@Injectable();
export class Auth {

    private user;
    authorized: EventEmitter<boolean>;

    constructor(public router:Router){
        this.authorized = new EventEmitter<boolean>();
    }

    login(user,token):void{
        localStorage.setItem('jwt',token);
        this.user = _.assign(user);

        this.authorized.emit(<boolean>true);
        this.router.parent.navigateByUrl('/');
    }
}


/***************/
@Component({...})
export class NavComponent {

     public isAuthroized: boolean = false;

     constructor(Auth:Auth){
         Auth.authorized
             .subscribe((data) => this.onUserChanged(data));
     }

     onUserChanged(user){
        alert('USER:' + user.email);
        this.isAuthroized = true;
     }
}

/****************/
bootstrap(AppComponent,[
     ROUTER_PROVIDERS,ELEMENT_PROBE_PROVIDERS,HTTP_PROVIDERS,MapLoader,Auth
])

但没有运气.我应该使用Observable EventEmitter还是有其他正确的方法来处理这种情况?在NG1中,它就像在服务的属性上设置$watch一样简单.谢谢!

编辑:
我为Auth服务添加了新方法:

...
userUpdated: EventEmitter<boolean>;

constructor(public router:Router){
    this.userUpdated = new EventEmitter<any>();
}

...

logout(returnUrl?: string): void{
    delete this.user;
    localStorage.removeItem('jwt');
    this.userUpdated.emit(undefined);

    if(!_.isEmpty(returnUrl)){
        this.router.parent.navigateByUrl(returnUrl);
    }

}

现在调用事件,为什么这适用于注销而不是登录?

编辑2:

export class LoginPageComponent {
   error: string;

   constructor(public http: Http,public router: Router,public Auth:Auth){
   }

   login(event,email,password){
      ...
      this.http.post('/api/login',loginModel,{headers: headers})
        .map((res) => res.json())
        .subscribe((res: any) => {
            this.Auth.login(res.user,res.ADM_TOKEN);
        },(error) => this.error = error._body);
   }

}

解决

愚蠢的错误..我离开了提供者数组[Auth]中的NavComponent ..所以这是与全球Auth不同的对象..抱歉伙计们!希望这个问题能帮助Angular2中的新人.谢谢你的努力.

解决方法

我假设您正在为每个组件添加Auth作为提供程序.这将为每个组件创建一个新的类实例. 仅在引导程序(AppComponent,providers:[…])中或仅在AppComponent上添加它.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读