나는 appcomponent가 있고 appcomponent의 HTML에 메뉴의 하위 구성 요소를로드합니다.
내 메뉴 구성 요소에 기능이 있습니다. 사용자가 로그인 한 후 트리거되기를 원합니다. http 호출을 통해 사용자 사진을 가져와 메뉴에 표시하고 싶습니다.
<app-menu></app-menu>
<div class="container">
<router-outlet>/*HERE IS WHERE THE USER GETS LOGGED IN*/</router-outlet>
</div>
라우팅을 사용하여 로그인 구성 요소를로드하므로 클릭 이벤트를 사용하여 메뉴 구성 요소에서 기능을 트리거 할 수 없습니다.
누군가이 문제를 해결하는 방법에 대한 제안이 있습니까?
고마워!
도움이된다면 메인 서비스에서 Subject와 Subscription을 사용하여 사용자의 로그인 / 로그 아웃을 듣습니다.
main.service.ts
public loginState: boolean;
public loginStateOnChange: Subject<boolean> = new Subject<boolean>(); // listen to the variable isLogin
isLogin(): boolean{ return this.loginState; }
setLogin(value: boolean): void{ this.loginState = value; }
app.component.ts
_loginSubscription: any;
constructor(mainService: MainService) {
this.mainService = mainService;
this._loginSubscription = this.mainService.loginStateOnChange.subscribe((value) => { this.onChangeLogin(); });
}
onChangeLogin(){
// this may be your trigger
}
login.component.ts
login() {
(...)
this.mainService.setLogin(true);
this.mainService.loginStateOnChange.next(this.mainService.isLogin());
}
logout(){
this.mainService.setLogin(false);
this.mainService.loginStateOnChange.next(this.mainService.isLogin());
}
도움이되기를 바랍니다. 더 많은 정보가 필요하면 망설이지 마십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다