1

我正在尝试使用 Angular 5 中的 ng-select 在下拉列表中显示项目。但是我正在设计的下拉组件本质上应该更通用，这意味着调用我的下拉列表的人应该能够传递自定义模板以在下拉列表中显示项目。即下拉列表中的项目列表应使用特定模板构建，并且对我的通用下拉列表的调用应显示自定义的项目列表。这是可以在嵌入中实现的吗？目前我正在使用 String[] 数据类型的“dropdownVal”，但我需要有模板/组件数组。

我的代码如下

dropdown.component.ts

@Component({
  selector: 'wdsk-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {


  @Input() dropdownVal: string[];
  @Input() placeholder: string;

  @Output() selectedItem = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  onSelect(value: any) {
    this.selectedItem.emit(value);
  }
}

模板 - dropdown.component.html

<div class="col-md-12 account-dropdown">
  <div class="form-group row">

    <div class="col-md-12">

      <ngx-select tabindex="0" placeholder={{placeholder}} [items]="dropdownVal" (selected)="onSelect($event)">
      </ngx-select>
    </div>
  </div>
</div>
4

1 回答 1

1

我之前使用 Angular Material 的mat-select元素完成了此操作，使用 @ContentChildren 和 ng-template。

这里的工作示例

下拉列表.ts

import { Component, OnInit, Input, ViewEncapsulation, Output, EventEmitter, ViewChild, ContentChildren, QueryList , TemplateRef} from '@angular/core';
import { MatSelectChange, MatSelect } from '@angular/material/select';

// Template Sections
@Component({
  selector: 'custom-dropdown-item',
  template: '<ng-template #content><ng-content></ng-content></ng-template>'
})
export class CustomDropdownItemsComponent {
  @ViewChild('content') content: any;
  @Input() value: any;
  @Input() width: string;
  @Input() height: string;
  @Output() click: EventEmitter<any> = new EventEmitter();

  onClick() {
    this.click.emit(this.value);
  }
}

@Component({
  selector: 'custom-dropdown',
  templateUrl: './custom-dropdown.component.html',
  styleUrls: ['./custom-dropdown.component.scss']
})
export class CustomDropdownComponent implements OnInit {
  @ViewChild('matSelect') matSelect: MatSelect;
  @Output() valueChange: EventEmitter<MatSelectChange> = new EventEmitter<MatSelectChange>();
  @Output() openedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Input() value: any;
  @Input() items: string[];
  @Input() placeholder: string;
  @Input() dropdownTitle: string;
  @Input() addDynamicContent: boolean = false;
  @Input() compareWith: Function;
  defaultCompareWithFn: Function = function () { };
  selectedIndex = -1;

  @ContentChildren(CustomDropdownItemsComponent)
  ddItems:QueryList<CustomDropdownItemsComponent>;

  constructor() { }

  ngOnInit() {
  }

  valueChanged(event: MatSelectChange) {
    this.valueChange.emit(event.value);
  }
}

dropdown.html

<mat-select #matSelect [(value)]="value" (selectionChange)="valueChanged($event)">
  <mat-option style="width:100px" [value]="0">
    <h1 style="color:red">I'm content = 0</h1>
  </mat-option>
  <mat-option [style.width]="ddlItem.width" [value]="i+1" *ngFor="let ddlItem of ddItems; let i = index">
    <ng-container [ngTemplateOutlet]="ddlItem.content"></ng-container>
  </mat-option>
</mat-select>

传入自定义项：

<div class="mat-app-background basic-container" style="width:200px; padding:0; margin:0">
    <custom-dropdown [addDynamicContent]="true" [(value)]="selected">
        <custom-dropdown-item width="100px">
                <span style="color:green">I'm dynamic content = 1</span>
        </custom-dropdown-item>
        <custom-dropdown-item width="100px">
                <p style="color:blue">I'm dynamic content = 2</p>
        </custom-dropdown-item>
    </custom-dropdown>
</div>
<div>
  Selected: {{ selected }}
</div>
于 2018-11-21T21:10:55.933 回答