Angular 2+ Content Projection и привязка свойств компонента - PullRequest
Новая
       42

Angular 2+ Content Projection и привязка свойств компонента

0 голосов
/ 18 октября 2018

Я застрял на жестком материале об Angular Content Projection.Я хотел бы проецировать компонент A на другой B и связать некоторые свойства компонента A.

Например, у меня есть компонент SwitchButton (с несколькими вариантами выбора).Я хочу, чтобы этот компонент отображал либо текст, либо изображения.

Для этого вот мой SwitchButtonComponent (HTML): 

<div class="container border rounded bg-white">
   <div class="row text-center">
      <div *ngFor="let it of items" class="col" style="cursor:pointer;">
         {{it}}
      </div>
   </div>
</div>

Я опустил класс ts, здесь нет необходимости, ноКонечно, у него есть свойство items .Я использую этот компонент в другом, например, так: 

<div>
   <switch-button [items]="['A','B','C']"></switch-button>
</div>

Ну, это простой случай.Это работает нормально.

Теперь у меня есть более сложный объект в элементах, и я хочу отобразить изображение.Это даст: 

<div>
   <switch-button [items]="[{path:'./img1.png'},{path:'./img2.png'}]">
       <img-component></img-component>
   </switch-button>
</div>

img-component - это просто простой компонент, отображающий изображение и имеющий одно свойство: imgPath.

И в SwitchButtonComponent:

<div class="container border rounded bg-white">
   <div class="row text-center">
      <div *ngFor="let it of items" class="col" style="cursor:pointer;">
         <ng-content></ng-content>
      </div>
   </div>
</div>

Здесь вы можете видеть, что я не могу связать свойство imgPath проецируемого компонента (img-component).

У вас есть идеи, ребята?

1 Ответ

0 голосов
/ 18 октября 2018

Я не знаю, возможно ли это с помощью ng-content.Я решил это, используя <ng-container> (если это соответствует вашим требованиям):

SwitchButtonComponent : 

<div class="container border rounded bg-white">
  <div class="row text-center">
    <div *ngFor="let it of items" class="col" style="cursor:pointer;">
     <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ $implicit: it }"></ng-container>
    </div>
  </div>
</div>

AppComponent : 

<div>
  <switch-button [items]="[{path:'./img1.png'},{path:'./img2.png'}]">
    <ng-template let-item>
      <img-component [item]="item"></img-component>
    </ng-template>
  </switch-button>
</div>

ImageComponent : 

<div>{{ item.path }}</div>

...

@Input()
item: any;

Здесь - это пример Stackblitz, демонстрирующий это.

Надеюсь, это поможет.

...