angular - 用于通用 Angular 组件的 NgRx 设计

Question

我有一个通用的日期选择器：

datepicker.component.html

<mat-form-field>
    <mat-label>{{ label }}</mat-label>
    <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" (dateInput)="emit()"> 
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

datepicker.component.ts

@Component({
    selector: 'app-datepicker',
    templateUrl: './input-datepicker.component.html',
    styleUrls: ['./input-datepicker.component.css'],

  })
  export class InputDatepickerComponent {

    @Input() label: string = "";

    @Input() selectedDate = new FormControl();
    @Output() selectedDateChange = new EventEmitter();


    emit(){
        this.selectedDateChange.emit(this.selectedDate);
    }

  }

例如，如果我在一个组件中需要两个日期选择器，我可以用两行代码来完成：

<app-datepicker label="Select start date" [(selectedDate)]="dateFrom"></app-datepicker>
<app-datepicker label="Select end date" [(selectedDate)]="dateTo"></app-datepicker>

使用此设置，我只需要在父组件中声明变量（在本例中为 dateFrom 和 dateTo），并且只要所选日期发生更改，变量就会更新。

这可以用 NgRx 完成，而不必为每个状态创建一个新的 reducer 吗？

标签： angularngrx