angular – 在路由器插座组件中输入变量

发布时间：2020-12-17 07:15:00 所属栏目：安全来源：网络整理

导读：我想知道你们现在是否可以使用@Input ngOnChanges()组合或在组件内部做同样的事情. 基本上,我在我的AppComponent和我的模板中设置了一个记录的：boolean变量： router-outlet/router-outletlogin [logged]="logged"/login 我想要的是能够在路由器插座中的组

我想知道你们现在是否可以使用@Input ngOnChanges()组合或在组件内部做同样的事情.

基本上,我在我的AppComponent和我的模板中设置了一个记录的：boolean变量：

<router-outlet></router-outlet>
<login [logged]="logged"></login>

我想要的是能够在路由器插座中的组件内观察记录的变量,所以我只在记录设置为true时才在这里制作东西.

我试过把< router-outlet [logged] =“logged”>< / router-outlet>但这不起作用,并且在服务中使用变量似乎不适合ngOnChanges()监视.

有人有想法吗？谢谢！

解决方法

创建具有可订阅的可观察服务

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { ReplaySubject } from 'rxjs/ReplaySubject';

@Injectable()
export class UserSessionService {

  private _loggedIn: ReplaySubject<boolean> = new ReplaySubject<boolean>();

  public logUserIn() {
    this._loggedIn.next( true );
  }

  public logUserOut() {
    this._loggedIn.next( false );
  }

  public getUserLoggedInObs(): Observable<boolean> {
    return this._loggedIn.asObservable();
  }

}

将服务添加到父模块(如果将其添加到多个模块,请小心,因为您可能使用不同的loggedIn值获得此服务的不同实例)

import { NgModule } from '@angular/core';
import { UserSessionService } from 'wherever/service/is/located';

@NgModule({
  providers: [ UserSessionService ]
})

export class AppModule { }

在你的控制器做类似的事情

public userLoggedInObs: Observable<boolean>;
constructor( private userSessionService: UserSessionService ) {
  this.userLoggedInObs = userSessionService.getUserLoggedInObs()
}

您可以在视图中添加

<div *ngIf="userLoggedInObs | async">
  User is logged in
</div>
<div *ngIf="!(userLoggedInObs | async)">
  User isn't logged in
</div>

当您调用该服务时,它将广播到当前订阅它的所有组件,然后将进行实时更新.

（编辑：李大同）

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