如何在选择器 B Angular 中使用来自选择器 A 的 ng-template

Question

我有一个带有选择器 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和选择器#tableFooter中使用ng-template和选择器#modalFooter？因为我一直在尝试下面的代码：

<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取消不在应用程序中显示-table。

提前致谢。

Answer 1

您可以创建 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>

要更进一步你可以看看这个link

如何在选择器 B Angular 中使用来自选择器 A 的 ng-template

How To Use ng-template from selector A in selector B Angular

angular

ng-template