How to resolve the state object in a child component?

Question

Angular

In general, there is such a state for ui-router'a

export function resolveUser(userService: UserService) {
  return userService.get();
}
 let homeState = {
  parent: 'app',
  name: 'home',
  url: '/home'
  component: HomeComponent,
  resolve: [
    { token: 'currentUser', deps: [UserService], resolveFn: resolveUser },
  ]
};

@Component({
   selector: 'app-home',
   template: '<app-menu></app-menu>'
})
export class HomeComponent {
    @Input('currentUser') user: User; //Здесь все нормально
}

@Component({
   selector: 'app-menu',
   template: '<div>{{user.name}}</div>'
})
export class MenuComponent {
    @Input('currentUser') user: User; //Здесь уже пусто
}

The problem is that currentUser in HomeComponent is resolved by @Input('currentUser') user: User,
but not in child components.
Question: how to throw it into all child components?

Answer 1

there is no forwarding to the lowest element from the middle

@Component({
   selector: 'app-home',
   template: '<app-menu [currentUser]="user"></app-menu>'
})