ダイナミックタイムゾーンセレクタの実装角度2/4/5

Question

角度4/5アプリケーションでTimeZoneセレクタを構築する必要があります。ユーザーがタイムゾーンを変更すると、ページ上に表示されるすべての時間値が直ちに更新されると思います。

私が使用することを計画していた：angular2-momentとangular-moment-timezoneを使用してタイムゾーンをサポートして

• momentjsを。
• 日付を書式設定するには、amLocalパイプとそれに続くパイプを使用します。
• ユーザーが異なるタイムゾーンを選択すると、私は、現在表示されている時間の値が変更されませんが、新しいタイムゾーンとしてフォーマットされ、この時点から上記の値でmoment.tz.setDefault(_timezone)

を呼び出すために計画しています。角度変化検出機構は、入力値が変更されていないので、表示された時間値を更新しません。

パフォーマンスのオーバーヘッドのために（時間帯の変更が頻繁ではないことを考慮して）、「不純な」パイプを作成したくありません。

フォールバックとして、現在のタイムゾーンをパラメータとして使用するパイプを作成する（または既存のパイプを使用する）ことができます。実際には動作しますが、現在のタイムゾーン値を各コンポーネントとテンプレートに渡す必要があります。

値の変化がなくても変化があると信じる角度変化検出の方法を見つけることができませんでした。

どのようなご提案も歓迎いたします。

Answer 1

パイプはコンポーネントではなく（明らか）、pureフラグ以外の独自の変化検出メカニズムはありません。したがって、希望の結果を得るには2つの方法があります。

1. 以前の値と以前のフォーマット結果を追跡するスマートな不純なパイプを使用します。

   if (value !== this.value || this.timeZoneChanged) 
   { 
       this.value = value; 
       this.formattedValue = ... render value ...; 
   } 
   return this.formattedValue; 
   

   あなたはgithubの上AsyncPipeソースコードを閲覧することができます（そして、私はそれが純粋なされると考えていることを行うための別の方法があった場合、実際に不純である）の角のAsyncPipeはこのように実装されています。

2. カスタムコンポーネントを使用して日付をレンダリングします。カスタムはControlValueAccessorです。

Answer 2

例えば、ngx-translateを使用する場合、言語を切り替えると新しい翻訳を取得することを意味します。 hereを見ると、彼らはあなたが言ったように性能の問題を暗示する不純なパイプを使用しています。

私が想像している別のやり方は、あなたのアプリ全体に利用可能なコンポーネントDateComponentを定義することです。そうすれば、{{ value | formatDate }}のhtmlの代わりに<custom-date [date]="new Date()"></custom-date>が表示されます。はい：私は値*の変更がなかったにも変更があると信じるに角度変化を検出するための方法を見つけることができませんでした*カスタム日付コンポーネントで

この

@Component({ 
    selector: 'custom-date', 
    template: '<span>{{ formatedDate }}</span>' 
}) 
export class DateComponent { 
    @Input() date: string; 
    timezone: string; 
    formatedDate: string; 
    constructor(private userService: UserService) {} 

    ngOnInit(){ 
    this.timezone = this.userService.getTimeZone(); 
    this.updateValue(); 
    this.userService.onTimezoneChange() 
     .subscribe(timezone => { 
     this.timezone = timezone; 
     this.updateValue(); 
     }); 
    } 

    updateValue() { 
    // Do your formatting the way you want 
    this.formatedDate = moment(this.date).tz(this.timezone).format(); 
    } 
}