Блог

Привет, сообщество Angular,

Я хочу передать ng-шаблон от родительского к дочернему компоненту, как в примере ниже :

#app.component:

     <app-parent>
        <ng-template #itemTemplate let-item>
              <div class="myClass">{{ item.name }}</div>
        </ng-template>
    </app-parent>
  

РОДИТЕЛЬСКИЙ:

TS:

 item: Item;
@ContentChild('itemTemplate', { static: false }) itemTemplateRef: TemplateRef<any>;
  

ШАБЛОН:

 <ng-container [ngTemplateOutlet]="itemTemplateRef" [ngTemplateOutletContext]="{$implicit: item}"></ng-container>
  

До сих пор все в порядке, ng-template правильно вводится в родительский компонент, но что, если мы хотим не использовать его в родительском компоненте, а ввести его в его дочерний компонент, чтобы родительский компонент стал таким :

НОВЫЙ РОДИТЕЛЬСКИЙ:

TS:

 item: Item;
@ContentChild('itemTemplate', { static: false }) itemTemplateRef: TemplateRef<any>;
  

ШАБЛОН:

 <child>
    <ng-container [ngTemplateOutlet]="itemTemplateRef" [ngTemplateOutletContext]="{$implicit: item}"></ng-container>
</child>
  

Таким образом, дочерний элемент будет идентичен старому родительскому элементу:

ДОЧЕРНИЙ:

TS:

 item: Item;
@ContentChild('itemTemplate', { static: false }) itemTemplateRef: TemplateRef<any>;
  

ШАБЛОН:

 <ng-container [ngTemplateOutlet]="itemTemplateRef" [ngTemplateOutletContext]="{$implicit: item}"></ng-container>
  

Так что это не работает, я хочу только настроить РОДИТЕЛЬСКИЙ элемент для правильной передачи <ng-template #ItemTemplate> ДОЧЕРНЕМУ элементу