Angular 如何在选择器B中使用选择器A中的ng模板

我有一个带有选择器

app popup

和

app table

的组件例如：如果我想使用这个组件选择器，它的代码如下：

在我的

应用程序弹出窗口中

我可以使用带有选择器的

ng模板

#modalFooter来传递其中的一些按钮，它看起来像下面的代码：

取消

在我的

app table

中，我还有

ng模板

，带有选择器

#tableFooter

，在其中传递一些内容，因此它看起来像下面的代码：

桌子按钮
取消

我的问题是如何使用

ng模板
和选择器
#modalFooter
在
ng模板
和选择器
#tableFooter
中？因为我一直在尝试下面的代码：


取消

但上面的代码现在起作用了，
按钮
取消并没有显示在应用程序表中

提前感谢。
您可以创建一个
TableFooter组件

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

和html格式

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


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

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