2 각 구성 요소 모범 사례

Question

모든 사용자 정보가 저장되고 userService에서 제공되는 관측 가능 정보로 업데이트되는 사용자 개체가있는 응용 프로그램이 있습니다. 이제는 컴포넌트로 관찰 할 수있는 사용자를 사용하는 것이 가장 좋은 방법인지 궁금합니다.

캘린더 구성 요소 (캘린더)가있는 페이지 (TestPage)가 있습니다. 캘린더는 주간보기 또는 월별보기가 표시되어 있어야하므로 사용자 객체를 사용합니다.

옵션 1 : 첫 번째 옵션은 TestPage에서 관찰 하나를 만드는 것입니다 및 속성과 함께 사용자 개체를 제공하고 달력, 그것은 @input와 사용자를 가져옵니다.

TestPage의 타이프 라이터 파일 :

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(); 
    } 
} 

TestPage의 HTML :

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

일정 :

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

옵션 2 : 는 산부인과 만들기 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

지금까지 몇 번 성공 했었던 다른 옵션은 콜백 함수를 포함 할 수있는 config 클래스/객체를 전달하는 것입니다. 이 방법으로 두 세계 모두에서 최고를 얻습니다. 일정 구성 요소는 서비스에 직접 가입 할 수 있지만 여전히 바보 상태입니다.

그것은 다음과 같이 보일 것입니다 :

TestPage

----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

첫 번째 옵션은 첫 번째 옵션과 마찬가지로 두 번째 옵션보다 좋다고 생각합니다. 의존성은 명시 적이며 구성 요소 만 입력 모델에만 의존합니다. 입력을 제공 할 수있는 한 일정 구성 요소는 어디에서나 사용할 수 있습니다. 달력 구성 요소는 멍청한 구성 요소으로 더 많은 역할을합니다.

스마트하고 벙어리 인 구성 요소 패턴을 검색하여 복잡한 UI를 위해 구성 요소를 디자인하는 방법을보다 잘 이해할 수 있습니다.