Передать код шаблона дочернему компоненту в угловых - PullRequest
Новая
       38

Передать код шаблона дочернему компоненту в угловых

0 голосов
/ 16 марта 2019

У меня есть компонент, содержащий formGroup со следующим компонентом 

<input-number placeholder="Number" formControlName="NumericValue" required></input-number>
                  <button class="infoSuffix" type="button" matSuffix mat-icon-button aria-label="info" (click)="OpenInfo()">
                <mat-icon>info_outline</mat-icon>
              </button>

вводимое число является оберткой для <input type="text">

 <mat-form-field class="full-width">
    <input
      type="text"
      ..>
      </mat-form-field>

Для корректной визуализации компонента необходимо передать кнопку в дочернем компоненте следующим образом: 

    <input
      type="text"
      ..>
<button class="infoSuffix" type="button" matSuffix mat-icon-button aria-label="info" (click)="OpenInfo()">
                    <mat-icon>info_outline</mat-icon>
                  </button>
      </mat-form-field>

Как мне этого добиться? Должен ли я просто передать объект Config и отобразить его, или есть лучший способ

Ответы [ 2 ]

2 голосов
/ 16 марта 2019

Попробуйте это, используя ng-content концепцию проекции контента

шаблон входного номера 

<mat-form-field>
  <input type="text" ..>

  <ng-content></ng-content>

</mat-form-field>

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

родительский компонент 

<input-number placeholder="Number" formControlName="NumericValue" required>
   <button class="infoSuffix" type="button" matSuffix mat-icon-button aria-label="info" (click)="OpenInfo()">
        <mat-icon>info_outline</mat-icon>
   </button>
</input-number>
0 голосов
/ 18 марта 2019

Для меня решение состояло в том, чтобы реализовать пользовательский элемент управления полем формы в контроллере, как описано здесь https://material.angular.io/guide/creating-a-custom-form-field-control#-code-ngcontrol-code-, тогда следующий код работал 

<mat-form-field>
<input-number placeholder="Number" formControlName="NumericValue" required></input-number>
   <button class="infoSuffix" type="button" matSuffix mat-icon-button aria-label="info" (click)="OpenInfo()">
        <mat-icon>info_outline</mat-icon>
   </button>
</mat-form-field>
...