труба перевода не работает незаметно для пользовательского заголовка DatePicker для материала

Question

Я создал пользовательский компонент для заголовка моего указателя даты. В шаблоне компонента я использую переводчик. Проблема в том, что, когда я впервые открываю средство выбора даты, весь текст, к которому был применен переводчик, не отображается вообще. Но только когда я нажимаю на следующий / предыдущий месяц, это происходит.

Я публикую свой код для пользовательского компонента ниже, может кто-нибудь сказать мне, что я могу сделать, чтобы избежать этого?

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

Является ли пользовательский компонент частью угловой библиотеки?

Вы вызываете TranslateModule.forChild () в своем @NgModule?