angular - 如何以角度 5 显示自定义下拉菜单
问题描述
我正在尝试使用 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>
解决方案
我之前使用 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>
推荐阅读
- android - 是否能够处理包含的 xml 内的按钮按下
- java - 我不断得到什么 ClassCastExpection
- python - keras:样本权重多重不平衡输出
- scheme - Racket 中的 SICP Ch5 eceval 编译器:set-cdr!进入引用列表(不是重复)
- python - Python Pygame - 如何为我的游戏添加计时器?
- javascript - 如何将服务器的当前时间戳自动放入 PHP 的 strtotime() 函数中?
- pandas - 如何对多列使用交叉表?
- c# - Telerik radgridview CellFormatting 不稳定
- mysql - 如何使用一列的值来检查另一行的值?
- php - 手动输入地址时保护laravel中的路由