角度4 | "通知する"コンポーネントを実行する

Question

私は"< app-navbar >"ブラケットを使ってアプリケーションに注入するnavbarコンポーネントを持っているので、ルート変更があっても常にロードされます。

私は、ユーザーがバックエンドサーバーからフロントエンドサーバーにリダイレクトされるログインシステムをいくつかのURLパラメーターとともに使用しています。コンポーネント（localhost:4200/auth/steam）は、これらのパラメータを自分のローカルストレージに保存して、成功するとユーザをフロントエンドホームページ（localhost:4200/）にリダイレクトします。ユーザーがログインしたので、自分のユーザー名をナビゲーションバーに表示します。

問題は、ローカルストレージからユーザー名を取得して表示できるようにするために、ナビゲーションバーコンポーネントに「通知」する方法の手がかりがないことです。

これを行ううまい方法は何ですか？

ところで申し訳ありませんが、この質問が理解しにくい場合は、私はそれをよりうまく説明する方法がわかりません。

BTW2：これはむしろ一般的な質問なので、コード例が必要ではないと思います。以下にコメントが必要な場合

Answer 1

私はObservableを使用し、ユーザサービスへのアップデートがある場合にはナビゲーションバーに通知します。

@Injectable() 
export class UserService { 
    private user: ReplaySubject<UserAuthorizations> = new ReplaySubject<UserAuthorizations>(); 
    get user() { 
    return this._user.asObservable(); 
    } 


    constructor() { 
    } 

    getCurrentUser(username?: string, password?: string): Observable<UserAuthorizations> { 
     this.user.next('=>'+username+'-'+password); 
    }); 
    } 

} 

変数

ユーザーオブジェクトへの変更があったときに、ユーザーサービスがイベントを放出する/今、あなたはあなたのサービスで/発光ユーザーを注入しているとして、あなたはNAV-バーでcomponentを、 subscribeユーザ変数に変更され、ユーザオブジェクトに変更があったときに更新されます。

export class myComponent { 

    constructor(private userService: UserService) { 
    userService.user.subscribe((usr) => { 
     this.userdisplay = user.name; 
    }); 
    } 

} 

公式角度のドキュメント：https://angular.io/guide/component-interaction#component-interaction

Answer 2

、他のユーザーが投稿したとして、あなたは対象と観測可能な組み合わせを使用することができます。

<nav-bar>コンポーネントをアプリにグローバルに追加する代わりに、 コンポーネントを個別のルートに追加することができます。<nav-bar>

このようにして、<nav-bar>コンポーネントがルート変更で破棄され、再び初期化されます。 initでローカルストレージからユーザー名を取得し、補間を使用して設定できます。