Question

我想知道你们现在是否有办法让@Input + ngOnChanges（）组合或在组件内做同样的事情。

基本上，我在AppComponent和我的模板中设置了logged: boolean变量：

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

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

我试图放<router-outlet [logged]="logged"></router-outlet>但这不起作用，并且在服务中使用变量似乎不符合ngOnChanges（）监视。

有人有想法吗？谢谢！

Answer 1

创建一个具有可观察订阅

的服务

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>

当您呼叫该服务时，它将广播到当前订阅它的所有组件，然后将实时更新。

Answer 2

我想说的最简单方法是使用服务并将此服务添加到您的孩子

    set isLogged(value: boolean) {
        localStorage.setItem('logged', value);
    }

    get isLogged(): boolean {
        return <boolean> localStorage.getItem('logged'));
    }
}

或使用localstorage

constructor(private loginService:LoginService) {}
logged: boolean;
ngOnInit() {
    this.logged = true;
    // variable:
    this.loginService.setLogged(logged);
    // Localstorage:
    localStorage.setItem('logged', logged);
}

在您的组件中：

logged: boolean;
constructor(loginService:LoginService) {
    // variable:
    this.logged = this.loginService.isLogged();
    // Localstorage:
    this.logged = this.loginService.isLogged;
}

在您的子组件中：

Fantasy = {"Gotham":["city", 2000], "Smallville":["town", 30]}
Real = {"London":["city", 1000], "Whitby":["town", 40]}

for i,j in zip(Fantasy,Real):
    print (i,end='')
    print (" ",Fantasy[i][-1],end = '')
    print (" ",j,end='')
    print (" ",Real[j][-1])

路由器插座组件中的输入变量

2 个答案: