1. 首先在组件中定义下拉框的HTML和CSS样式：

  {{ selectedValue }}
  

    
      
        {{ option.label }}
      
    
  


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  background: white;
  border: 1px solid #ccc;
  padding: 5px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 5px;
  cursor: pointer;
}

.dropdown-item:hover {
  background: #f5f5f5;
}

2. 在组件中定义下拉框的逻辑和数据：

@Component({
  selector: 'app-custom-dropdown',
  template: `
    
  `,
})
export class CustomDropdownComponent {
  @Input() options: Option[] = [];
  @Output() optionSelected = new EventEmitter();

  selectedValue: string;

  dropdownTemplate = this.templateRef;
  dropdownContext: DropdownContext = {
    $implicit: this.selectedValue,
    selectOption: (option: Option) => {
      this.selectedValue = option.label;
      this.optionSelected.emit(option);
    },
    options: this.options,
  };

  constructor(private templateRef: TemplateRef) {}
}

interface Option {
  value: any;
  label: string;
}

interface DropdownContext {
  $implicit: string;
  selectOption: (option: Option) => void;
  options: Option[];
}