Angular 4, Использование пользовательской директивы для переключения между различными шаблонами HTML - PullRequest
Новая
       41

Angular 4, Использование пользовательской директивы для переключения между различными шаблонами HTML

0 голосов
/ 26 декабря 2018

Мы используем реактивные формы и, исходя из некоторых условий, мы хотим, чтобы определенные поля были либо свободным текстом, либо раскрывающимся списком.

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

Я искал что-то вроде этого: Как я могу сделать структурную директиву, чтобы обернуть часть моего DOM?

Я думаю, что использование рендерера было бы лучшим вариантом, ноэто имеет значение, если я использую атрибут или структурные директивы?Они говорят, что используют структурные для модификации Dom, но похоже, что это можно сделать и с атрибутами.

1 Ответ

0 голосов
/ 27 декабря 2018

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

ifelse.component.html: 

<mat-radio-group *ngIf="showOne;else other_content" >
  <mat-radio-button value="auto">Auto</mat-radio-button>
  <mat-radio-button value="always">Always</mat-radio-button>
  <mat-radio-button value="never">Never</mat-radio-button>
</mat-radio-group>
<ng-template #other_content>
  <mat-radio-button value="manual">Manual</mat-radio-button>
<ng-template #other_content></ng-template>

ifelse.component.ts 

@Component({
  selector: 'app-ifelse',
  templateUrl: './ifelse.component.html',
  styleUrls: ['./ifelse.component.css']
})
export class IfelseComponent {

  @Input()
  private showOne: boolean;

}

использование: 

<app-ifelse [showOne]="false"></app-ifelse>
...