某自定义组件如上图所示，在固定操作列左右各有一个插槽ng-template,如何匹配插槽内容

方案一: ContentChildren + 自定义指令(收集模板)

自定义指令 nz-template.directive.ts

ts
import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
import { NzSafeAny } from "ng-zorro-antd/core/types";

@Directive({
  selector: '[nzTemplate]'
})
export class NzTemplateDirective implements OnInit {

  @Input('nzTemplate')
  name: string = "default"

  @Input()
  type: string = ""

  constructor(private viewContainer: ViewContainerRef, private template: TemplateRef<NzSafeAny>) {
    this.template = template;
  }
  ngOnInit(): void {
    this.viewContainer.createEmbeddedView(this.template)
  }
  getType() {
    return this.name;
  }
}

组件html模板

html
<div [class]="['tl-handbar-container',styleClass]">
    <div class="tips-title">
        <span class="tips-titlespan"></span>
        <span class="tips-titletwo"></span>
        <i class="icon-line-chart"></i>
        {{title}}
    </div>
    <div class="tips-inner">
        <div class="breadcrumb-box">
            <!-- 导航信息   -->
        </div>
        <div class="tips-btns">
            <span class="ui-tips-span left" *ngIf="describe||leftTemplate">
                {{describe}}
                <ng-container *ngTemplateOutlet="leftTemplate"></ng-container>
            </span>
            <ng-container *ngFor="let item of actionButton">
                <button> 操作按钮</button>
            </ng-container>
            <span class="right-slot" *ngIf="rightTemplate">
                <ng-container *ngTemplateOutlet="rightTemplate"></ng-container>
            </span>            
        </div>
    </div>
</div>

组件 nz-handleBar.component.ts

import { AfterContentInit, Component, ContentChildren, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
import { NzTemplateDirective } from "./nz-template.directive"

@Component({
  selector: 'nz-handlebar',
  templateUrl: './handlebar-super.component.html',
  styleUrls: ['./handlebar-super.component.less'],
  host: {
    '[class.nz-handlebar]': 'true',
  }
})
export class NzHandleBarSuperComponent implements OnChanges, AfterContentInit {

  @Input()
  title?: string

  @Input()
  describe?: string

  @Input()
  styleClass?: string

  @ContentChildren(NzTemplateDirective)
  templates

  leftTemplate: TemplateRef<void>

  rightTemplate: TemplateRef<void>

  /** 操作栏 */
  @Input()
  actionButton?: ActionButtonType[]

  constructor() { }

  ngOnChanges(changes: SimpleChanges): void {}

  ngAfterContentInit() {
    this.templates.forEach((item) => {
      switch (item.getType()) {
        case 'left':
          this.leftTemplate = item.template;
          break;
        case 'right':
          this.rightTemplate = item.template;
          break;
        default:
          this.leftTemplate = item.template;
          break;
      }
    });
  }
}

使用自定义组件

html
<nz-handlebar
      title="测试页面" 
      [describe]="'描述信息'" 
      styleClass="xx2">   
      <ng-template nzTemplate="left">
        <button>Left</button>
      </ng-template>
      <ng-template nzTemplate="right">
        <button>Right</button>
      </ng-template>               
 </nz-handlebar>

注意: 使用这种方案时，ng-template要写在组件内部

方案二: @Input + 模板片段

这种方式，在自定义组件内部直接使用 @Input() 接收模板片段

import {Component, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
import { NzTemplateDirective } from "./nz-template.directive"

@Component({
  selector: 'nz-handlebar',
  templateUrl: './handlebar-super.component.html',
  styleUrls: ['./handlebar-super.component.less'],
  host: {
    '[class.nz-handlebar]': 'true',
  }
})
export class NzHandleBarSuperComponent implements OnChanges {

  @Input()
  title?: string

  @Input()
  describe?: string

  @Input()
  styleClass?: string

  @Input()
  leftTemplate: TemplateRef<void>

  @Input()
  rightTemplate: TemplateRef<void>

  /** 操作栏 */
  @Input()
  actionButton?: ActionButtonType[]

  constructor() { }

  ngOnChanges(changes: SimpleChanges): void {}

}

组件使用

html
<nz-handlebar
      title="测试页面" 
      [describe]="'描述信息'" 
      styleClass="xx2"
      [leftTemplate]="left"
      [rightTemplate]="right">                
 </nz-handlebar>
 
 <ng-template #left>
    <button>Left</button>
  </ng-template>
  <ng-template #right>
    <button>Right</button>
  </ng-template>  

方案二比方案一更简单，方案一可以在指令内部可以做其它的事情