Блог

Я пытаюсь создать повторно используемый компонент выбора даты. Одна из особенностей заключается в том, что вы можете выбрать periodLevel . Например, ежемесячно, ежедневно или ежегодно. Проблема, с которой я сталкиваюсь, заключается в том, что когда я вызываю этот компонент из родительского компонента, я манипулирую уровнем периода, используя dateFormats переменную, которую я ввел useValue providers . В stackblitz я воссоздал ситуацию и дважды вызываю компонент child1, один раз с ежедневным уровнем и один раз с ежемесячным уровнем:

Оба средства выбора даты отображаются с месячным уровнем (мм / гггг), поскольку dateFormats переменная настроена таким образом для второго дочернего компонента.

Внутри дочернего компонента 1. Я использую dateFormats переменную в providers компоненте для управления форматированием даты.

Проблема в том, что я не знаю, как я могу использовать локальную переменную внутри useValue , чтобы избежать повторного использования одного и того же dateFormats для всех дочерних компонентов. Желаемый результат для примера stackblitz заключается в том, что первый дочерний компонент показывает ежедневный уровень (дд / мм / гггг), а второй дочерний компонент показывает месячный уровень (мм / гггг).

https://stackblitz.com/edit/angular-ivy-qpa9x6?file=src/app/app.component.html

Удалось решить мою проблему, внеся две корректировки.

1. используется useFactory для создания уникального экземпляра dateFormats переменной (абстрагируется в DataService )
2. Введите MAT_DATE_FORMATS в локальную переменную в конструкторе компонента, чтобы иметь возможность изменять его -> this.thisDateFormat .

Я могу порекомендовать урок Angular University по провайдерам всем, кто сталкивается с подобной проблемой: https://angular-university.io/lesson/angular-di-providers-injection-tokens