角2は、互いに聴くためのコンポーネントを取得する

Question

ユーザーがサインインされているかどうかに基づいて表示または非表示にしたいナビゲーションコンポーネントがあります。このために、localStorageを追加して、ユーザーしかし、私のナビゲーションコンポーネントはOnInitの間だけこれを聞きます。

どのコンポーネントを別のコンポーネントの変更にリッスンすることができますか？この場合、ナビゲーションをサインインコンポーネントの関数onloginに応答させます。

navigation.component.ts

export class NavigationComponent implements OnInit { 
private navshow: boolean; 
if (localStorage.getItem('confirmo')){ this.navshow = true; } 
} 

signin.component.ts

export class SigninClass { 
onlogin(){ 
localStorage.setItem('confirmo', 'verdad'); } 
} 

Answer 1

あなたは何かonChangesを追跡したり、変更が発生したことを「叫び」うちにイベント方法論を使用することができます。

シングルトンサービスを作成します。発光方法があります。あなたの他のコンポーネントでサービスを受け取り、それを購読してください。

すなわち

サービス

export class MessageInformation{ 
    constructor(public name: string, public details: string, public extra?: any[]){ 

    } 
} 

@Injectable() 
export class MessagingService { 
public parentFrameChangeEvent: EventEmitter<MessageInformation>; 

constructor(){ 
    this.parentFrameChangeEvent = new EventEmitter<MessageInformation>(); 
} 

public sendMessage(message: MessageInformation): void{ 
    this.parentFrameChangeEvent.emit(message); 
} 

}

は、あなたの呼び出しコンストラクタに注入し、あなただけでMessageInformationを必要といけない注意してください（ように

var reloadMessage: MessageInformation = { name: "reload", details: "forcereload", extra: tabIdArray }; 
     this.messaging.sendMessage(reloadMessage); 

を使用余分な情報を渡すために使用する内部クラス）

は、任意の宛先コンポーネントに同じシングルトンサービスを注入し、その後、ログインイベントにすべての作業を行うこの方法では

this.messenger.parentFrameChangeEvent.subscribe(message => this.reloadData(message)); 

を購読

Answer 2

は、次のリンクを見てみましょう。 ObservableとShared Serviceを使用してこれを実現することができます。

Angular.io Component Interaction using a Service