我正在使用離子7和角(材料)14。

我想在適用的字段標(biāo)簽中顯示必填字段指示符(*)。

在Ionic 6中，我通過(guò)在ion-label中添加span標(biāo)簽實(shí)現(xiàn)了這一點(diǎn)，帶有一個(gè)用于樣式的類，例如:

<ion-item>
  <ion-label position="fixed">Title<span class="required-field-indicator">*</span></ion-label>
  <ion-select formControlName="title">
    <ion-select-option *ngFor="let title of titles" value="{{title}}">{{title}}</ion-select-option>
  </ion-select>
</ion-item>

然后，我可以使用CSS更改指示器的樣式:

.required-field-indicator {
  color: var(--ion-color-tertiary);
  font-weight: bolder;
  padding: 2px;
}

我的字段將顯示如下:

我現(xiàn)在已經(jīng)升級(jí)到Ionic 7，根據(jù)文檔(https://ionicframework . com/docs/API/select)，ion-label不再與ion-input和ion-select一起工作。相反，應(yīng)該使用離子選擇組件的標(biāo)簽和標(biāo)簽放置屬性，如下例所示:

我相應(yīng)地更新了我的代碼:

<ion-item>
  <ion-select label="Title" labelPlacement="fixed" formControlName="title" [required]="true">
    <ion-select-option *ngFor="let title of titles" value="{{title}}">{{title}}</ion-select-option>
  </ion-select>
</ion-item>

但是，由于這一更改，我不能再添加(除非我在label屬性中將它作為字符添加)或自定義我的必填字段指示符符號(hào)。

如何在Ionic 7中添加我的指示器并設(shè)置樣式？

我在離子輸入組件上使用CSS成功地做到了這一點(diǎn):

.required-indicator {
  .label-text::after {
    content: '*';
    transform: translate(-100%, 0);
    color: var(--ion-color-tertiary) !important;
    font-weight: bolder;
    padding: 2px;
  }
}

<ion-input label="First Name" labelPlacement="fixed" type="text" formControlName="firstName"
              class="required-indicator" [required]="true"></ion-input>

但是這在離子選擇上不起作用。我也嘗試過(guò)使用陰影部分并創(chuàng)建一個(gè)指令來(lái)將指示器附加到DOM中，但是無(wú)論如何我都不能訪問(wèn)標(biāo)簽。請(qǐng)幫幫忙！

目前還沒(méi)有辦法做到這一點(diǎn)(Ionic 7.0.10)，但它已經(jīng)作為一個(gè)特性請(qǐng)求在Github Repository中針對(duì)Ionic進(jìn)行了討論。看起來(lái)他們將添加標(biāo)簽作為陰影DOM部分，允許你像樣式化占位符和文本一樣樣式化它，如@Maxime的回答所示。

我試圖完成同樣的事情，并最終有了一個(gè)解決方案。

由于標(biāo)簽位于IonSelect的shadow-root中，并且沒(méi)有part屬性來(lái)公開(kāi)它，因此無(wú)法在SCSS文件中設(shè)置它的樣式，但可以在typescript中完成，如下所示:

// For referencing all of the ion-select inside the form
@ViewChildren(IonSelect) ionSelects; 

ngAfterViewInit() {
   // This was for being sure of having all the ion-select loaded
   this.ionSelects.changes.subscribe(data => {
      // Creating the CSS rules we're gonna apply inside the shadow-root
      const sheet = new CSSStyleSheet();
      sheet.replaceSync(`.label-text::after {
         content: ' *';
         transform: translate(-100%, 0);
         color: var(--ion-color-secondary) !important;
         display: var(--ion-label-display); // This is necessary to show 
         // and hide the asterisk
         font-weight: bolder;
         padding: 2px;
      }`)
           
      const arrIonSelect = data.toArray(); // From Queryselector 
      // to Array of IonSelect
      arrIonSelect.forEach((isel) => {
         // Storing the current CSS rules used by the shadow-root
         const elemStyleSheets = 
            isel.el.shadowRoot.adoptedStyleSheets;
         // Merging the rules
         isel.el.shadowRoot.adoptedStyleSheets = 
            [...elemStyleSheets, sheet];
      });
   });
}

最后，在html中，我們將樣式屬性綁定到所需的“條件”:

<ion-select  
[style.--ion-label-display]="form.get('title')?.errors?.required ? 'initial' : 'none'"
label="Title" labelPlacement="stacked" formControlName="title">
   <ion-select-option *ngFor="let title of titles" value="{{title}}">{{title}}</ion-select-option>
</ion-select>

我希望他們?cè)谖磥?lái)能改變一些事情，但是現(xiàn)在我希望這能有所幫助，對(duì)我來(lái)說(shuō)就是這樣。

查看Ionic文檔的CSS陰影部分。

將您的類添加到離子組件中

<ion-select class="required-field-indicator" ...>

然后在CSS中添加

ion-select.required-field-indicator::part(text) {
    ...
}