如何从ng-content子元素获取模板？Angular 5自定义选择组件实现

嘿，我之前在做类似的自定义选择组件时也碰到过这个问题，刚好可以给你讲讲Angular 5里怎么实现从ng-content子元素中获取模板来显示选中内容～

核心思路是通过ContentChildren获取所有传入的app-option组件实例，再提取每个选项内部的模板引用，选中时直接渲染对应的模板即可。下面是具体实现步骤：

第一步：定义AppOptionComponent #

我们需要让每个app-option能暴露自身的模板引用和绑定的value值，所以在组件里用ViewChild获取内部的模板：

import { Component, Input, TemplateRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-option',
  template: `<ng-template><ng-content></ng-content></ng-template>`
})
export class AppOptionComponent {
  // 接收外部传入的选项值
  @Input() value: any;
  // 获取当前选项的模板引用
  @ViewChild(TemplateRef) template: TemplateRef<any>;
}

这里用<ng-template>包裹了ng-content，这样就能通过ViewChild拿到整个选项内容的模板实例。

第二步：实现AppSelectComponent #

在选择组件里，我们需要收集所有的app-option，并管理选中状态和模板渲染：

import { Component, Input, ContentChildren, QueryList, TemplateRef } from '@angular/core';
import { AppOptionComponent } from './app-option.component';

@Component({
  selector: 'app-select',
  template: `
    <div class="select-container" (click)="toggleDropdown()">
      <!-- 渲染选中的选项模板或占位符 -->
      <ng-container *ngIf="selectedValue; else placeholderTpl">
        <ng-container *ngTemplateOutlet="selectedOptionTemplate"></ng-container>
      </ng-container>
      <ng-template #placeholderTpl>{{ placeholder }}</ng-template>

      <!-- 下拉选项列表 -->
      <div class="dropdown-list" *ngIf="isDropdownOpen">
        <div 
          *ngFor="let option of optionList" 
          (click)="handleOptionSelect(option)"
          class="dropdown-item"
        >
          <ng-container *ngTemplateOutlet="option.template"></ng-container>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .select-container {
      border: 1px solid #e0e0e0;
      padding: 8px 12px;
      cursor: pointer;
      position: relative;
      width: fit-content;
    }
    .dropdown-list {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin-top: 4px;
      border: 1px solid #e0e0e0;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .dropdown-item {
      padding: 8px 12px;
    }
    .dropdown-item:hover {
      background-color: #f5f5f5;
    }
  `]
})
export class AppSelectComponent {
  // 外部传入的占位符文本
  @Input() placeholder: string = 'Select something';
  // 收集所有通过ng-content传入的app-option
  @ContentChildren(AppOptionComponent) optionList: QueryList<AppOptionComponent>;

  isDropdownOpen = false;
  selectedValue: any;
  selectedOptionTemplate: TemplateRef<any>;

  // 切换下拉框显示/隐藏
  toggleDropdown() {
    this.isDropdownOpen = !this.isDropdownOpen;
  }

  // 处理选项选中逻辑
  handleOptionSelect(option: AppOptionComponent) {
    this.selectedValue = option.value;
    this.selectedOptionTemplate = option.template;
    this.isDropdownOpen = false;
    // 如果需要双向绑定，可以在这里emit值变化
    // this.valueChange.emit(this.selectedValue);
  }
}

这里的关键点：

• @ContentChildren(AppOptionComponent)会自动收集所有嵌套在app-select里的app-option组件实例
• 使用*ngTemplateOutlet指令来渲染选中选项的模板，这样就能完整显示选项里的图片、文字等内容
• 未选中时会渲染占位符模板

第三步：使用组件 #

按照你给出的方式使用即可，注意img的src要加方括号做属性绑定：

<app-select placeholder="Select smth">
  <app-option *ngFor="let option of options" [value]="option">
    <img [src]="option.iconLocation"> {{ option.name }}
  </app-option>
</app-select>

额外提示 #

• 记得在你的NgModule里同时声明AppSelectComponent和AppOptionComponent
• 如果需要支持双向绑定，可以给AppSelectComponent添加@Output() valueChange = new EventEmitter<any>()，并在handleOptionSelect里触发this.valueChange.emit(this.selectedValue)，使用时就能写[(value)]="selectedItem"
• Angular 5中ContentChildren的查询结果会在ngAfterContentInit钩子后才可用，如果需要初始化默认选中项，建议把逻辑放在ngAfterContentInit里而不是ngOnInit

内容的提问来源于stack exchange，提问作者Maxim Krabov