Angular-如何在非父子关系的 components 之间绑定 field

1. fist of all, we have a interface stands for the field type

export interface User{
  username: string;
  age: number;
}

 

2. then, we generate a service that can be used as bridge between these components

@Injectable()
export class CurrentUserStoreService {
  // initial value with nnull or something else, for example undefined
  private currentUserSubject = new BehaviorSubject<User>(null);

  // some one might subscribe this to get real-time value, as below 
  public currentUserSubject$ = this.currentUserSubject.asObservable();
  
  // some one might use this to change value
  setCurrentUser(user: User) {
    this.currentUserSubject.next(user);
  }
}

 

3. we need to bind a user to our html, for example a header that has status of current user

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  // provide our service here 
  providers: [CurrentUserStoreService]
})
export class AppComponent {
  user: User;

  constructor( private currentUserStoreService: CurrentUserStoreService) {
    //subcribe and bind the value to our field 
    currentUserStoreService.currentUserSubject$.subscribe(value => {
      this.user = value;
    });
  }

 //bypass this unless you have read and understand the  contents in file userLoginComponent.ts,  if user has logged out , just update user ,  pass a null value to user
  logout():void {
  // now some one has subscribed it will get null value
  this.currentUserStoreService.setCurrentUser(null);
}


}

 

4. now a user have login in , and we need to save the user, then update the status in header( the same as im component AppComponent ), and redirect the page to path ''

@Component({
  selector: 'app-login',
  templateUrl: './user-login.component.html',
  styleUrls: ['./user-login.component.css']
  // wo don't provide service here
})
export class UserLoginComponent {
   constructor( 
    private router: Router,
    private currentUserStoreService: CurrentUserStoreService ) { }
   login():void {
    user: User = ......//login process
    // we there pass the user to service and it hleps broadcast this value to someone has subscribed it 
    this.currentUserStoreService.setCurrentUser(user);
    // we don't user location.href to redirect ( which means reload the entire application ), just use router
    this.router.navigateByUrl('');
   }

}

tips: 

　　Set the currentUserStoreSerivce to  @Injectable({ provide: 'root' })  to make it visible in the whole application , but in most case don't do this. In this case   UerLoginComponent  was wrapped in  AppComponent  by using tag  <router-outlet></router-outlet>  in  app.component.html  , when it needs a service it looks up to its upper components (not parent) , as we can see using chrome extension  Angury

 

Check this at gist