Angular 6 - Как я могу реорганизовать код для этих элементов управления - PullRequest
Новая
       24

Angular 6 - Как я могу реорганизовать код для этих элементов управления

0 голосов
/ 03 июля 2019

У меня есть приложение, которое довольно широко использует элементы управления автозаполнением Angular Material. Мы используем их, чтобы пользователи могли выбирать адреса электронной почты, которые можно прикрепить к форме. Вот как мы их используем 

<mat-form-field class="input-width-500">
   <mat-chip-list #recipientChipList>
      <mat-chip *ngFor="let email of emailRecipients" 
         (removed)="removeEmailList(email)">{email}}
            <mat-icon matChipRemove>cancel</mat-icon>
          </mat-chip>
          <input type="text" matInput placeholder="Add Recipients" 
            formControlName="addRecipient"
            [matAutocomplete]="autoRecipient" 
            [matChipInputFor]="recipientChipList" 
            (matChipInputTokenEnd)="addEmail($event)">
        </mat-chip-list>
        <mat-autocomplete #autoRecipient="matAutocomplete" 
          [displayWith]="displayEmailIds"
          (optionSelected)="addEmailList($event)">
          <mat-option *ngFor="let val of filteredRecipients" [value]="val">
            {{val}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

и код сервера для добавления писем: 

addEmail(event: MatChipInputEvent): void {
  const input = event.input;
  const value = event.value;
  if (!this.autoRecipient.isOpen) {
    if (input && value !== '') {
        this.emailRecipients.push(value);
      input.value = '';
    }
   }
    input.value = '';
   }

И он работает нормально, но у нас есть четыре из них на странице для разных типов электронных писем (CC, BCC и т. Д.), И все они работают одинаково, единственное различие заключается в ссылках на элемент управления autocomplete и массив, который электронные письма передаются после выбора. Я пытаюсь найти способ реорганизовать функцию addEmail, чтобы у нас была только одна функция, но пока я, кажется, слишком усложняю ее. Ищите здесь общее направление, заранее спасибо.

EDIT:

Итак, я добавил это в шаблон: 

(matChipInputTokenEnd)="newAddEmail($event, autoRecipient, addRecipientCtrl, emailRecipients)"

и это к концу: 

newAddEmail(event: MatChipInputEvent, autoControl: MatAutocomplete, recipientControl: AbstractControl, emailArray: any[]): void {

const input = event.input;
const value = event.value;
if (!autoControl.isOpen) {
  if (input && value !== '') {
      emailArray.push(value);
      input.value = '';
  }
}
input.value = '';

}

1 Ответ

1 голос
/ 03 июля 2019

Вам просто нужно передать два свойства в качестве дополнительных аргументов вашего метода: 

(optionSelected)="addEmailList($event, autoRecipient, emailRecipients)">

[...] 

addEmail(event: MatChipInputEvent, autoComplete: MatAutoComplete, recipients: Array<Something>) {
  const input = event.input;
  const value = event.value;
  if (!autoComplete.isOpen) {
    if (input && value !== '') {
      recipients.push(value);
      input.value = '';
    }
  }
  input.value = '';
}
...