Куда и как импортировать mat_label_global_options?

Следуя этому примеру Поле формы с меткой, я попытался изменить поведение заполнителя mat-form-field. Есть три варианта: auto, always и never.

Эта функция действительно хороша и может использоваться в зависимости от того, какой тип плейсхолдера хотел бы реализовать разработчик.

И на самом деле его можно использовать глобально, передавая его прямо в @NgModule в корне приложения:

@NgModule({
  providers: [
    {provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'}}
  ]
})

и построим представление следующим образом:

<mat-form-field [floatLabel]="never"> // never, auto or always
   <input matInput placeholder="Simple placeholder" required>
</mat-form-field>

Моя проблема в том, что я сначала не нахожу / не знаю, где я могу / должен импортировать: MAT_LABEL_GLOBAL_OPTIONS, поскольку кажется, что его нет в @angular/material, и если я проверю этот GitHub-Repo, я вижу, что он импортирован из @angular/material/core, но он не работает у меня, потому что я получаю следующую ошибку:

/node_modules/@angular/material/core"' has no exported member 'MAT_LABEL_GLOBAL_OPTIONS'. Did you mean 'MAT_RIPPLE_GLOBAL_OPTIONS'?

Имеет ли это отношение к материалу и версии интерфейса командной строки, которую я использую?

Angular CLI: 1.5.0
Node: 8.0.0
OS: darwin x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.0-rc.2
@angular/cli: 1.5.0
@angular/material: 5.0.0-rc.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.7
typescript: 2.4.2
webpack: 3.8.1

пробовали ли вы новую версию материала: "^ 5.2.3"? import {MAT_LABEL_GLOBAL_OPTIONS} from "@angular/material"; его можно импортировать из пакета материалов по моему проекту.

Xin Meng 11.04.2018 11:55

Это будет означать, что мне нужно обновить свой @angular/material, потому что, как видите, у меня есть: @angular/material: 5.0.0-rc.2

k.vincent 11.04.2018 12:01

Я уверен, что версия 5.2.3 может это импортировать. И согласно исходному коду 5.0.0-rc.2 не имеет файла с именем label-options.tsgithub.com/angular/material2/blob/…, куда экспортируется MAT_LABEL_GLOBAL_OPTIONS. поэтому я думаю, что эта версия должна использовать старую опцию: MAT_PLACEHOLDER_GLOBAL_OPTIONS, см. этот github.com/angular/material2/commit/…

Xin Meng 11.04.2018 12:09

этот коммит github.com/angular/material2/commit/…

Xin Meng 11.04.2018 12:10

обновитесь до 5.0.0-rc.3 и попробуйте, думаю должно работать

Xin Meng 11.04.2018 12:14
3
5
2 232
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Минимальная версия материала для поддержки MAT_LABEL_GLOBAL_OPTIONS - 5.0.0-rc.3.

Потому что он экспортируется в этот файл: https://github.com/angular/material2/blob/5.0.0-rc.3/src/lib/core/label/label-options.ts, но у rc.2 нет этого файла Страница https://github.com/angular/material2/blob/5.0.0-rc.2/src/lib/core/label/label-options.ts не найдена. Так что попробуйте обновиться до RC.3.

См. Примечание к выпуску 5.0.0-rc.3: https://github.com/angular/material2/releases/tag/5.0.0-rc.3

form-field: add support for separate label and placeholder (#8223) (d6fec35), closes #6194

эта функция добавляет новую экспортную константу: MAT_LABEL_GLOBAL_OPTIONS

Теперь я обновил свой @angular/material до "@angular/material": "^5.2.4" и попробовал: import { MAT_LABEL_GLOBAL_OPTIONS } from '@angular/material';, но он все равно выдает ту же ошибку.

k.vincent 11.04.2018 13:23

Выглядит хорошо. Вроде нормально работает. Я предполагаю, что код Visual Studio выдает эту ошибку и может пропустить какое-то расширение angular. Все выглядит хорошо, включая компиляцию.

k.vincent 11.04.2018 13:53

Большой! рад это слышать.

Xin Meng 11.04.2018 14:04

В Angular 9 это снова изменился:

As of Angular Material version 9, the MAT_LABEL_GLOBAL_OPTIONS injection token is deprecated. The default floating label behavior should be set through the MAT_FORM_FIELD_DEFAULT_OPTIONS token.

Таким образом, текущий способ - добавить { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'always' } } в массив поставщиков вашего модуля.

Чтобы это работало в Angular 11

import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

Другие вопросы по теме