Angular：使用router-outlet将数据或事件从子节点传递到父节点

Question

I have parent AppComponent with routes login, home etc. When user logs in with creds, I'm saving the user creds in Sessionstorage. When the login is successful I want to display some part of the data in header of AppComponent.html, so I have to getItems from seesionstorage. How do I trigger the event to notify AppComponent from LoginComponent? I'm using router-outlet so I cannot use EventEmitter. I can use BehaviourSubject but there is no valid method in AppComponent to call. Please suggest.

Answer 1

Use communication service for this:

CommunicationService.ts

@Injectable()
export class CommunicationService {
    constructor() { }

    private emitChangeSource = new Subject<any>();

    changeEmitted$ = this.emitChangeSource.asObservable();

    emitChange() {
        this.emitChangeSource.next();
    }
}

login.ts:

constructor(
    private communicationService: CommunicationService
    ) {
   }

   login(){
    this.communicationService.emitChange()
   }

AppComponent.ts:

constructor(
    private communicationService: CommunicationService,
    ) { 
    communicationService.changeEmitted$.subscribe(data => {
      // here fetch data from the session storage 
    })
  }

Hope this helps.

Answer 2

am just expanding 'Hrishikesh Kale' answer a bit, from your view, you are storing user credentials in localstorage.

just get that stored data in service

credentials(){
    const usercredential = localStorage.getItem('usercredential')
    if(usercredential === "undefined"){
      return false
    }
    else {
      return true
    }
  }

and in your html

<a *ngIf="service.loggedIn() && service.credentials()">Admin</a>