Доступ к дочерним компонентным переменным внутри ng-контейнера - PullRequest
Новая
       37

Доступ к дочерним компонентным переменным внутри ng-контейнера

1 голос
/ 25 марта 2019

У меня есть пользовательский компонент, который называется Список предложений, который отображает список предложений для пользователя из наблюдаемой.Я создал этот компонент как можно более универсальным, чтобы вы могли передавать любой массив данных, поэтому я хотел бы иметь возможность настроить его отображение от родителя, поскольку я никогда не буду знать наверняка, как будут выглядеть объекты дореализуя это.К сожалению, я не могу получить доступ к переменным дочерних компонентов от родителя в ng-контейнере.

Возможно ли это с помощью ng-container или ng-template или мне следует выбрать другой маршрут в целом?

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

    <suggestion-list (suggestionSelected)="selectSuggestion($event)" [$suggestions]="$suggestionSource">
      <ng-container>
        {{suggestion.firstname + ' ' + suggestion.lastname}}
      <ng-container>
    </suggestion-list>

Дочерний компонент 

  <mat-list role="list">
    <mat-list-item *ngFor="let suggestion of $suggestions | async">
      <mat-icon mat-list-icon>person</mat-icon>
      <mat-card (click)="selectSuggestion(suggestion)">
        <ng-container></ng-container>
      </mat-card>
    </mat-list-item>
  </mat-list>

Ответы [ 2 ]

1 голос
/ 25 марта 2019

Один из подходов - использовать ng-template. Вы можете определить шаблон для каждого элемента в родительском компоненте и отобразить шаблон в дочернем компоненте для каждого элемента в массиве:

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

<suggestion-list (suggestionSelected)="selectSuggestion($event)" 
                 [suggestions]="$suggestionSource | async" 
                 [suggestionTemplate]="suggestionTemplate">
</suggestion-list>

<ng-template #suggestionTemplate let-suggestion>
<span>{{suggestion.firstname + ' ' + suggestion.lastname}}</span>
</ng-template>

А в вашем дочернем компоненте вы можете просто сделать (обратите внимание, что мы пропускаем предложение var в шаблоне через неявный контекст ng-template: 

<ng-container *ngFor="let suggestion of suggestions>
    <ng-container *ngTemplateOutlet="suggestionTemplate; context: {$implicit: suggestion}"></ng-container>
</ng-container>

В файле .ts дочернего компонента вы объявляете переданный шаблон следующим образом: 

@Input() suggestionTemplate: TemplateRef<any>;

PS: я написал этот код прямо сейчас, поэтому он не тестируется, но я думаю, что вы можете понять, что вы можете сделать!

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

Здесь - рабочий пример

parent.component.html 

   <div>
     <suggestion-list (suggestionSelected)="selectSuggestion($event)" [$suggestions]="$suggestionSource">
       <p>{{suggestion.firstname + ' ' + suggestion.lastname}}</p>
     </suggestion-list>
   </div>

child.component.html 

   <div>
     <ng-content></ng-content>
     <p>Hello !</p>
   </div>
...