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

Question

我有一个带有选择器app-popup和app-table的组件例如：如果我想使用这个组件选择器，它看起来像下面的代码：

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

在我的app-popup中，我可以使用带有选择器#modalFooter的ng-template来传递一些按钮，它看起来像下面的代码：

<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取消了应用程序表中没有显示的内容。

提前谢谢。

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>中使用multiple selectors创建多个Content Projection

@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>

要走得更远，你可以看看这个链接