Как использовать ng-шаблон из селектора A в селекторе B Angular - PullRequest
Новая
       19

Как использовать ng-шаблон из селектора A в селекторе B Angular

1 голос
/ 03 марта 2020

У меня есть компонент с селектором app-popup и app-table. Например: , если я хочу использовать этот селектор компонентов, он будет выглядеть следующим образом: 

<app-popup>
    <app-table></app-table>
</app-popup>

В моем app-popup я могу использовать ng-template с селектором #modalFooter чтобы пропустить некоторую кнопку, она будет выглядеть следующим образом: 

<app-popup>
    <app-tree></app-tree>

    <!-- my popup ng-template custom button -->
    <ng-template #modalFooter let-activeModal>
        <button class="btn btn-primary" (click)="activeModal.close(true)">Cancel</button>
    </ng-template>
</app-popup>

В моем app-table у меня также есть ng-template, с селектором #tableFooter для передачи туда некоторого контента, так Это будет выглядеть следующим образом: 

<app-popup>
    <app-tree>
        <ng-template #tableFooter>
           <button class="btn btn-primary">Table Button</button>
        </ng-template>
    </app-tree>

    <!-- my popup ng-template custom button -->
    <ng-template #modalFooter let-activeModal>
        <button class="btn btn-primary" (click)="activeModal.close(true)">Cancel</button>
    </ng-template>
</app-popup>

Мой вопрос Как использовать ng-template с селектором #modalFooter в ng-template с селектором #tableFooter? Поскольку я уже пробовал этот код ниже: 

<app-popup>
    <app-tree>
        <ng-template #tableFooter>
            <!-- my popup ng-template custom button -->
            <ng-template #modalFooter let-activeModal>
                <button class="btn btn-primary" (click)="activeModal.close(true)">Cancel</button>
            </ng-template>
        </ng-template>
    </app-tree>
</app-popup>

Но этот код выше теперь работает, button отмена не отображается в таблице приложений.

Заранее спасибо.

1 Ответ

1 голос
/ 03 марта 2020

Вы можете создать tableFooterComponent

   @Component({
      selector: 'footer',
      template: `
         <button class="btn btn-primary">Table Button</button>
          <ng-content></ng-content>
      `,
    })
    export class tableFooterComponent {    
    }

А затем в html вы можете использовать его следующим образом 

<app-popup>
    <app-tree>
        <app-footer>
            <!-- my popup ng-template custom button -->
            <ng-template #modalFooter let-activeModal>
                <button class="btn btn-primary" (click)="activeModal.close(true)">Cancel</button>
            </ng-template>
        </app-footer>
    </app-tree>
</app-popup>

или в <app-tree> создать несколько Content Projection с multiple selectors 

       @Component({
          selector: 'app-tree',
          template: `
             <ng-content select="[tableFooter]"> </ng-content>
            <ng-content select="[modalFooter]"></ng-content>
          `,
        })
        export class treeComponent {    
        }

и html 

  <app-popup>
        <app-tree>
         <div tableFooter>
           <!--tableFooter content here -->
          <div modalFooter>  <!--modalFooter content here --> </div> 
         </div>
        </app-tree>
  </app-popup>

До go, далее вы можете посмотреть на эту ссылку

...