0

всем привет.

имеется некоторая логика, которая в шаблоне компонента дублируется

<ng-container *ngFor="let error of *object* | keyvalue">
    <p class="error-message">
      <span *ngIf="error.key === 'pattern'">{{...}}</span>
      <span *ngIf="error.key === 'maxlength'">{{...}}</span>
      <span *ngIf="error.key === 'required'">{{...}}</span>
    </p>
  </ng-container>

этот блок дублируется три раза, за исключением, что в блоках разный object и соответственно содержание span

хочу всю логику перенести в ng-template, примерно так

<ng-container *ngTemplateOutlet="errorMessage; context: *object* | keyvalue"></ng-container>
<ng-container *ngTemplateOutlet="errorMessage; context: *object2* | keyvalue"></ng-container>
<ng-container *ngTemplateOutlet="errorMessage; context: *object3* | keyvalue"></ng-container>

<ng-template #errorMessage let-error>
    <p class="error-message">
        <span *ngIf="error.key === 'pattern' && context === *object*">{{...}}</span>
        <span *ngIf="error.key === 'pattern' && context === *object2*">{{...}}</span>
        <span *ngIf="error.key === 'maxlength' && context === *object*">{{...}}</span>
        <span *ngIf="error.key === 'required' && context === *object*">{{...}}</span>
        ///
      </p>
</ng-template>

вопрос в следующем: можно ли в *ngIf прописывать такое условие context === *object*? или как правильно прописать условия в *ngIf?

3 ответа 3

0

Вообще, для таких случаев больше подходит ngSwitch, это уменьшит количество проверяемых условий в ngIf и упростит читабельность кода:

<container-element [ngSwitch]="error.key">
   <some-element *ngSwitchCase="pattern">

   </some-element>
   <some-element *ngSwitchCase="maxlength">...</some-element>
...
   <some-element *ngSwitchDefault>...</some-element> <- По-умолчанию
</container-element>

Здесь, в качестве container-element можно использовать любой контейнерный элемент, например ng-container, или p. В качестве some-element может выступать span, или любой другой html-элемент.

Можно вообще использовать один span и уже внутри него крутить ngIf, ngSwitch и так далее

0

Я бы предложил вынести в отдельный компонент

<p class="error-message">
    <span>{{text}}</span>
</p>
@Component({
  selector: 'error-message'
})
export class ErrorComponent  {
  @Input() errorKey: string;
  @Input() obj: any; // тут тип объекта и соответствующее имя

  get text(){
      if(errorKey === 'pattern' && obj === context){
        return `текст ошибки о первом объекте`
      }
      ...
  }
}

Пример использования

<ng-container *ngFor="let error of *object* | keyvalue">
      <error-message *ngIf="error.key" [object]="object" [errorKey]="error.key"></error-message>
</ng-container>
3
  • спасибо за ответ, звучит очень логично, но делаю рефакторинг в большом проекте, такие выкрутасы с созданием нового компонента не приветствуются:) у меня вопрос сработает ли условие context === *object* в *ngIf
    – Ekaterina
    7 июн 2022 в 7:25
  • Объект вы так сравнить не сможете, возможно у вас есть какое-то поле объекта, которое его идентифицирует 7 июн 2022 в 11:05
  • Весьма странно, рефакторинг может запросто быть связан с разделением логики по компонентам, чтобы код был более читабельным и реиспользуемым. Тем более ng-template нельзя реиспользовать вне шаблона компонента, такое придется копировать в другие файлы - по сути ничего не изменится. 8 июн 2022 в 3:25
0

нашла решение как норм все вынести в ng-template

<ng-container [ngTemplateOutlet]="errorMessage" [ngTemplateOutletContext]="{name: myContext, message: 'hi'}"></ng-container>
<ng-container [ngTemplateOutlet]="errorMessage" [ngTemplateOutletContext]="{name: myContext2, message: 'hi1'}"></ng-container>
<ng-container [ngTemplateOutlet]="errorMessage" [ngTemplateOutletContext]="{name: myContext3, message: 'hi2'}"></ng-container>

<ng-template #errorMessage let-name="name" let-message="message">
        <span *ngIf="name.name === 'World1'">{{message}}</span>
        <span *ngIf="name.name === 'World2'">{{message}}</span>
        <span *ngIf="name.name === 'World3'">{{message}}</span>
</ng-template>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.