Question

我为物料datepicker的标题创建了一个自定义组件。在组件模板中，我正在使用翻译管道。问题是，当我第一次打开日期选择器时，已应用转换管道的所有文本都根本不显示。但是只有当我单击下一个/上一个月时，它才会显示。

我要在下面发布自定义组件的代码，有人可以告诉我可以做些什么来避免这种情况吗？

HTML：

<div>
    <span [tabindex]="0" class="icon primary-icon icon-close btn-close" (click) = "closePicker()"> </span>
</div>

<div fxLayoutAlign="center">
  <span class="header">{{'common.label.selectDate'|translate}}</span>
</div>

<div class="example-header">
  <span class="icon-chevron-left arrow_left " (click)="previousClicked('month')"></span>
  <span class="example-header-label">{{periodLabel}}</span>
  <span class="icon-chevron-right arrow_right " (click)="nextClicked('month')"></span>
</div>

<tr>
    <th aria-label="Sunday" class="tr_header">{{'Su'|translate}}</th>
    <th aria-label="Monday" class="tr_header">{{'Mo'|translate}}</th>
    <th aria-label="Tuesday" class="tr_header">{{'Tu'|translate}}</th>
    <th aria-label="Wednesday" class="tr_header">{{'We'|translate}}</th>
    <th aria-label="Thursday" class="tr_header">{{'Th'|translate}}</th>
    <th aria-label="Friday" class="tr_header">{{'Fr'|translate}}</th>
    <th aria-label="Saturday" class="tr_header">{{'Sa'|translate}}</th>
</tr>

TS：

export class ExampleHeader<D> implements OnDestroy, OnInit {
  private destroyed = new Subject<void>();

  constructor(
      private calendar: MatCalendar<D>, private dateAdapter: DateAdapter<D>, private datePicker: MatDatepicker<D>,
      @Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats, private cdr: ChangeDetectorRef) {
    calendar.stateChanges
        .pipe(takeUntil(this.destroyed))
        .subscribe(() => cdr.markForCheck());
  }

  ngOnInit() {
    //this.cdr.detectChanges();
    //this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 0);
  }

  ngOnDestroy() {
    this.destroyed.next();
    this.destroyed.complete();
  }

  get periodLabel() {
    return this.dateAdapter
        .format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel)
        .toLocaleUpperCase();
  }
  closePicker() {
    this.datePicker.close();
  }

  previousClicked(mode: 'month' | 'year') {
    this.calendar.activeDate = mode === 'month' ?
        this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :
        this.dateAdapter.addCalendarYears(this.calendar.activeDate, -1);
  }

  nextClicked(mode: 'month' | 'year') {
    this.calendar.activeDate = mode === 'month' ?
        this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :
        this.dateAdapter.addCalendarYears(this.calendar.activeDate, 1);
  }
}

任何帮助将不胜感激。

Answer 1

自定义组件是Angular库的一部分吗？

您是否在@NgModule中调用 TranslateModule.forChild（）？

转换管道无法在Material datepicker自定义标头上无缝运行

1 个答案: