Лучшая практика для углового компонента 2

Question

У меня есть приложение с объектом пользователя, где хранится вся информация пользователя и обновляется с помощью наблюдаемого, который предоставляется из пользовательского сервиса. Теперь мне интересно, что лучше всего использовать для использования этого пользователя с компонентами?

У меня есть страница (TestPage) с компонентом календаря (календарь). В календаре используется пользовательский объект, потому что он должен знать, что он отображает представление недели или представление месяца.

Вариант 1: Первый вариант, чтобы создать одну наблюдаемую в тестовую страницу и дает пользовательский объект со свойством, а затем в календаре, он получает пользователь с @input.

тестовой страница файл машинопись:

export class TestPage { 
    private user: User; 
    private userSubscription: Subscription; 

    constructor(private usersService: UsersService) { 
     this.log('constructor'); 
     this.userSubscription = this.usersService.$currentUser.subscribe((user: User) => { 
      this.log('$currentUser: user update', user); 
      this.user = user; 
     }); 
    } 

    ngOnDestroy(): void { 
     this.log('ngOnDestroy: unsubscribing userSubscription'); 
     this.userSubscription.unsubscribe(); 
    } 
} 

тестовой страница HTML:

<flex-calendar [user]="user"></flex-calendar>

Календарь:

export class Calendar { 
    @Input() user: User; // Got the user from the TestPage 
} 

Вариант 2: Создание Observ в TestPage и в календаре. Этот параметр имеет то преимущество, что в календаре меньше ссылок со страницей.

Календарь:

export class Calendar { 
    private user: User; 
    private userSubscription: Subscription; 

    constructor(private usersService: UsersService) { 
     this.log('constructor'); 
     this.userSubscription = this.usersService.$currentUser.subscribe((user: User) => { 
      this.log('$currentUser: user update', user); 
      this.user = user; 
     }); 
    } 

    ngOnDestroy(): void { 
     this.log('ngOnDestroy: unsubscribing userSubscription'); 
     this.userSubscription.unsubscribe(); 
    } 
} 

Может кто-нибудь объяснить, что наилучшим вариантом было бы и почему?

Answer 1

Альтернативный вариант, который я использовал для успеха несколько раз, состоит в том, чтобы передать класс/объект конфигурации, который может содержать функцию обратного вызова. Таким образом, вы получаете лучшее из обоих миров; Компонент календаря может подписаться непосредственно на службу и все же оставаться немым.

Это будет выглядеть примерно так:

тестовую страницу

----Template---- 
<flex-calendar [calendarCallback]="calendarCallback"></flex-calendar> 

----TS---- 
export class TestPage implements OnInit { 
    private calendarCallback: Function; 
    private userSubscription: Subscription; 

    constructor(private usersService: UsersService) { 
     this.log('constructor'); 
    } 

    ngOnInit(): void { 
     this.calendarCallback = this.getUser.bind(this); 
    } 

    getUser(){ 
     let currentUser = new Subject<User>(); 
     this.usersService.$currentUser 
      .subscribe(
       (user: User)=> { 
        this.log('$currentUser: user update', user); 
        currentUser.next(user); 
       } 
      ); 
     return currentUser.asObservable(); 
    } 
} 

Календарь

----TS---- 
export class Calendar implements OnInit{ 
    private calendarCondition; 
    @Input("calendarCallback") calendarCallback; 

    getCalendarDependancy(){ 
     this.calendarCallback.subscribe(
      (result) => { 
       this.calendarCondition = result; 
      } 
     ) 
    } 
} 

Лучше всего, как указано Chandermani, чтобы держать компоненты, как немой, как это возможно ,С учетом этого основным преимуществом такого подхода является то, что компонент календаря больше не зависит от родительского компонента, чтобы обеспечить результат подписки, что не является проблемой в примере, поскольку оно стоит, но может стать единым, если сказать, что поиск запускается в самом календарном компоненте (например, при нажатии).

С уважением

Answer 2

Я считаю, что первый вариант лучше второго варианта, так как с первым вариантом зависимости явны, и только компонент зависит только от модели ввода. Пока может быть предоставлен входной компонент, календарный компонент можно использовать где угодно. Компонент календаря действует как нечетный компонент .

Поиск по умный и немой компонент шаблон, чтобы лучше понять, как компоненты могут быть разработаны для сложного интерфейса.