角2組件的最佳實踐

我有一個用戶對象的應用程序，其中存儲了所有用戶信息，並使用userService提供的可觀察對象進行更新。現在我想知道在組件中使用該用戶observable的最佳做法是什麼？角2組件的最佳實踐

我有一個帶有日曆組件（日曆）的頁面（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： 創建OB可以在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(); 
    } 
}

有人能解釋一下什麼是最好的辦法是，爲什麼？

來源

2017-01-05 mbakker1996

請發表評論。我不明白這些嘗試應該看起來像什麼。 –

我現在添加了一些代碼:)我無法添加所有內容，因爲這樣會更難理解。 – mbakker1996

我不明白問題所在。這兩個代碼塊除了類名外，看起來都是一樣的。 –

我已經習慣了幾次成功的替代選項是遞交一個可以包含回調函數的配置類/對象。這樣你就獲得了兩全其美的好處;日曆組件可以直接訂閱服務，但仍然愚蠢。

這將是這個樣子：

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指出，保持部件一樣傻乎乎的可能。有了這個說法，這種方法的主要優點是日曆組件不再依賴於父組件來提供訂閱的結果，這在示例中並不是問題，但它可能會變成一個，如果說在日曆組件本身內觸發查找（例如點擊）。

Regards

來源

2017-01-05 11:43:43

我相信第一個選項比第二個選項要好，因爲第一個選項的依賴關係是顯式的，只有組件只依賴於輸入模型。只要可以提供輸入，日曆組件就可以在任何地方使用。日曆組件更多地作爲愚蠢組件。

搜索有關聰明和愚蠢的組件模式，以更好地瞭解如何爲複雜的UI設計組件。

來源

2017-01-05 10:39:14 Chandermani

角2組件的最佳實踐

回答

相關問題