[英]angular 4 generic list with various list item templates
我正在嘗試建立一個通用組件,該組件顯示帶有angular 4和Material Design的項目列表。 目的是要有一個清單,我僅向其提供子組件,如下所示:
<generic-list
title="My name list title"
[items]="names"
(change)="handleNameChanged($event)">
<some-child let-item="name"></some-child>
</generic-list>
@ViewChild(GenericListItem)
childItem: GenericListItem;
或這個:
<generic-list ... [type]="simpleListItem"></generic-list>
@Input() type: Type<GenericListItem>;
export class GenericListItem {
@Input() value: any;
}
因此,任何子組件都應該從GenericListItem
擴展而來,並且能夠像期望的那樣顯示value
的屬性。 我需要一些示例組件:
@Component({
selector: 'app-simple-list-item',
template: '<p>{{value?.name}}</p>'
})
export class SimpleListItem extends GenericListItem {
}
@Component({
selector: 'app-chechbox-list-item',
template: '<md-checkbox [(ngModel)]="value?.enabled">{{value?.name}} &
{{value?.email}}</md-checkbox>'
})
export class CheckboxListItem extends GenericListItem {
}
generic-list
組件如下所示:
<md-list>
<h2 md-subheader>{{title}}</h2>
<md-list-item #outlet
*ngFor="let item of items; let i = index"
(click)="change.emit(item)">
// in here should go the content for each item
</md-list-item>
</md-list>
我一直在尋找實現這一目標的方法,但是,已經存在的解決方案都不再有效或不建議使用。 同樣,關於該主題的一些備用文檔也無濟於事...
我發現這個職位,我努力去適應,造成這種代碼在generic-list
:
export class GenericListComponent implements OnInit, AfterViewInit {
//inputs, outputs and other properties here
@ViewChildren('outlet', {read: ViewContainerRef})
outlets: QueryList<ViewContainerRef>;
ngOnInit() {
}
ngAfterViewInit() {
console.log(this.outlets); // prints '3', since I've declared 3 items
this.isViewInitialized = true;
this.updateChildren();
}
updateChildren() {
if (!this.isViewInitialized) {
return;
}
this.outlets.forEach((outlet, index) => {
const factory = this.cfr.resolveComponentFactory(this.type);
const componentRef = outlet.createComponent(factory);
componentRef.instance.value = this.items[index];
});
}
導致有關ChangeDetection的錯誤
錯誤:ExpressionChangedAfterItHasBeenCheckedError:檢查表達式后,表達式已更改。 上一個值:“未定義”。 當前值:“ Hi1V”。 似乎已在對其父級和子級進行臟檢查后創建了該視圖。 它是在變更檢測掛鈎中創建的嗎?
我的測試組件:
<app-generic-list
title="AppTitle"
[items]="names"
[type]="simpleListItem"
(change)="handleItemChanged($event)"></app-generic-list>
export class AppComponent {
simpleListItem = SimpleListItemComponent;
names = [
{value: 'Hi1V', desc: 'Hello1'},
{value: 'Hi2V', desc: 'Hello2'},
{value: 'Hi3V', desc: 'Hello3'}
];
handleItemChanged(item: string) {
console.log(item);
}
}
看來我可能已經接近解決方案,但是現在我不知道該在什么時候實例化這些組件。 另外,子組件中的自定義輸出是否可以正常工作,並且可以從generic-list
外部調用?
https://github.com/elgervb/ngx-components/blob/master/src/app/list/list.component.ts不會是更好的解決方案。 您可以創建列表並提供模板以呈現項目。 在模板中,您可以使用自己的自定義組件
全部以非常通用的方式進行。
用法示例如下:
<evb-list [items]="items" [filterEnabled]="true">
<ng-template let-item>
<md-checkbox [(ngModel)]="item?.enabled">{{item?.name}} &&
{{value?.email}}</md-checkbox>
</ng-template>
凡在NG-模板 項目將出現在列表中的每個項目。
我認為該組件以通用的方式完成了您想要的一切。
希望這對您有幫助
;-)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.