fix(module:list): change contentchild to input (#1100)

NG-ZORRO · Mar 5, 2018 · 5d9133b · 5d9133b
1 parent abb7de0
commit 5d9133b
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 44 deletions.
diff --git a/components/list/demo/basic.ts b/components/list/demo/basic.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-list-basic',
   template: `
-  <nz-list [nzDataSource]="data" [nzItemLayout]="'horizontal'">
+  <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
     <ng-template #item let-item>
       <nz-list-item>
         <nz-list-item-meta

diff --git a/components/list/demo/grid.ts b/components/list/demo/grid.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-list-grid',
   template: `
-  <nz-list [nzDataSource]="data" [nzGrid]="{gutter: 16, span: 6}">
+  <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzGrid]="{gutter: 16, span: 6}">
     <ng-template #item let-item>
       <nz-list-item [nzContent]="nzContent">
         <ng-template #nzContent>

diff --git a/components/list/demo/infinite-load.ts b/components/list/demo/infinite-load.ts
@@ -14,7 +14,7 @@ const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,
     [infiniteScrollThrottle]="50"
     (scrolled)="onScroll()"
     [scrollWindow]="false">
-    <nz-list [nzDataSource]="data">
+    <nz-list [nzDataSource]="data" [nzRenderItem]="item">
       <ng-template #item let-item>
         <nz-list-item>
           <nz-list-item-meta

diff --git a/components/list/demo/loadmore.ts b/components/list/demo/loadmore.ts
@@ -12,11 +12,13 @@ const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,
     class="demo-loadmore-list"
     [nzDataSource]="data"
     [nzItemLayout]="'horizontal'"
-    [nzLoading]="loading">
+    [nzLoading]="loading"
+    [nzRenderItem]="item"
+    [nzLoadMore]="loadMore">
     <ng-template #item let-item>
-      <nz-list-item [nzContent]="'content'">
-        <ng-template #action><a (click)="edit(item)">edit</a></ng-template>
-        <ng-template #action><a (click)="edit(item)">more</a></ng-template>
+      <nz-list-item [nzContent]="'content'" [nzActions]="[editAction,moreAction]">
+        <ng-template #editAction><a (click)="edit(item)">edit</a></ng-template>
+        <ng-template #moreAction><a (click)="edit(item)">more</a></ng-template>
         <nz-list-item-meta
             [nzTitle]="nzTitle"
             nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"

diff --git a/components/list/demo/resposive.ts b/components/list/demo/resposive.ts
@@ -3,7 +3,10 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-list-resposive',
   template: `
-  <nz-list [nzDataSource]="data" [nzGrid]="{gutter: 16, xs: 24, sm: 12, md: 6, lg: 6, xl: 4 }">
+  <nz-list
+    [nzDataSource]="data"
+    [nzRenderItem]="item"
+    [nzGrid]="{gutter: 16, xs: 24, sm: 12, md: 6, lg: 6, xl: 4 }">
     <ng-template #item let-item>
       <nz-list-item [nzContent]="nzContent">
         <ng-template #nzContent>

diff --git a/components/list/demo/simple.ts b/components/list/demo/simple.ts
@@ -5,17 +5,20 @@ import { Component } from '@angular/core';
   template: `
   <h3 [ngStyle]="{'margin-bottom.px': 16 }">Default Size</h3>
   <nz-list [nzDataSource]="data" nzBordered
-           [nzHeader]="'Header'" [nzFooter]="'Footer'">
+           [nzHeader]="'Header'" [nzFooter]="'Footer'"
+           [nzRenderItem]="item">
     <ng-template #item let-item><nz-list-item [nzContent]="item"></nz-list-item></ng-template>
   </nz-list>
   <h3 [ngStyle]="{'margin': '16px 0' }">Small Size</h3>
   <nz-list [nzDataSource]="data" nzBordered nzSize="small"
-           [nzHeader]="'Header'" [nzFooter]="'Footer'">
+           [nzHeader]="'Header'" [nzFooter]="'Footer'"
+           [nzRenderItem]="item">
     <ng-template #item let-item><nz-list-item [nzContent]="item"></nz-list-item></ng-template>
   </nz-list>
   <h3 [ngStyle]="{'margin': '16px 0' }">Large Size</h3>
   <nz-list [nzDataSource]="data" nzBordered nzSize="large"
-           [nzHeader]="'Header'" [nzFooter]="'Footer'">
+           [nzHeader]="'Header'" [nzFooter]="'Footer'"
+           [nzRenderItem]="item">
     <ng-template #item let-item><nz-list-item [nzContent]="item"></nz-list-item></ng-template>
   </nz-list>
   `

diff --git a/components/list/demo/vertical.ts b/components/list/demo/vertical.ts
@@ -3,12 +3,16 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-list-vertical',
   template: `
-  <nz-list [nzDataSource]="data" [nzItemLayout]="'vertical'">
+  <nz-list
+    [nzDataSource]="data"
+    [nzItemLayout]="'vertical'"
+    [nzRenderItem]="item"
+    [nzPagination]="pagination">
       <ng-template #item let-item>
-          <nz-list-item [nzContent]="item.content">
-              <ng-template #action><i class="anticon anticon-star-o" style="margin-right: 8px;"></i> 156</ng-template>
-              <ng-template #action><i class="anticon anticon-like-o" style="margin-right: 8px;"></i> 156</ng-template>
-              <ng-template #action><i class="anticon anticon-message" style="margin-right: 8px;"></i> 2</ng-template>
+          <nz-list-item [nzContent]="item.content" [nzActions]="[starAction,likeAction,msgAction]" [nzExtra]="extra">
+              <ng-template #starAction><i class="anticon anticon-star-o" style="margin-right: 8px;"></i> 156</ng-template>
+              <ng-template #likeAction><i class="anticon anticon-like-o" style="margin-right: 8px;"></i> 156</ng-template>
+              <ng-template #msgAction><i class="anticon anticon-message" style="margin-right: 8px;"></i> 2</ng-template>
               <nz-list-item-meta
                   [nzAvatar]="item.avatar"
                   [nzTitle]="nzTitle"

diff --git a/components/list/doc/index.en-US.md b/components/list/doc/index.en-US.md
@@ -18,15 +18,15 @@ A list can be used to display content related to a single subject. The content c
 | Property | Description | Type | Default
 | --- | --- | --- | --- |
 | nzDataSource | Data source for list | `any[]` | - |
-| item | Custom item renderer | `TemplateRef` | - |
+| nzRenderItem | Custom item renderer | `TemplateRef` | - |
 | nzBordered | Toggles rendering of the border around the list | boolean | false |
 | nzFooter | List footer renderer | `string,TemplateRef` | - |
 | nzGrid | The grid type of list. You can set grid to something like `{gutter: 16, column: 4}` | object | - |
 | nzHeader | List header renderer | `string,TemplateRef` | - |
 | nzItemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |
 | nzLoading | Shows a loading indicator while the contents of the list are being fetched | boolean | false |
-| loadMore | Shows a load more content | `TemplateRef` | - |
-| pagination | Shows a pagination content | `TemplateRef` | - |
+| nzLoadMore | Shows a load more content | `TemplateRef` | - |
+| nzPagination | Shows a pagination content | `TemplateRef` | - |
 | nzSize | Size of list | `default,small,large` | `default` |
 | nzSplit | Toggles rendering of the split under the list item | boolean | true |
 
@@ -48,8 +48,8 @@ A list can be used to display content related to a single subject. The content c
 | Property | Description | Type | Default
 | --- | --- | --- | --- |
 | nzContent | content renderer | `string,TemplateRef` | - |
-| action | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right. | `TemplateRef` | - |
-| extra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right. | `TemplateRef` | - |
+| nzActions | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right. | `Array<TemplateRef<void>>` | - |
+| nzExtra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right. | `TemplateRef` | - |
 
 ### nz-list-item-meta
 

diff --git a/components/list/doc/index.zh-CN.md b/components/list/doc/index.zh-CN.md
@@ -19,15 +19,15 @@ cols: 1
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | nzDataSource | 列表数据源 | `any[]` | - |
-| item | 自定义列表项 | `TemplateRef` | - |
+| nzRenderItem | 自定义列表项 | `TemplateRef` | - |
 | nzBordered | 是否展示边框 | boolean | false |
 | nzFooter | 列表底部 | `string,TemplateRef` | - |
 | nzGrid | 列表栅格配置 | object | - |
 | nzHeader | 列表头部 | `string,TemplateRef` | - |
 | nzItemLayout | 设置 `nz-list-item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - |
 | nzLoading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean | false |
-| loadMore | 加载更多 | `TemplateRef` | - |
-| pagination | 对应的 `pagination` 配置 | `TemplateRef` | - |
+| nzLoadMore | 加载更多 | `TemplateRef` | - |
+| nzPagination | 对应的 `pagination` 配置 | `TemplateRef` | - |
 | nzSize | list 的尺寸 | `default,small,large` | `default` |
 | nzSplit | 是否展示分割线 | boolean | true |
 
@@ -49,8 +49,8 @@ cols: 1
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | nzContent | 内容项 | `string,TemplateRef` | - |
-| action | 列表操作组，根据 `nzItemLayout` 的不同, 位置在卡片底部或者最右侧。 | `TemplateRef` | - |
-| extra | 额外内容, 通常用在 `nzItemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | `TemplateRef` | - |
+| nzActions | 列表操作组，根据 `nzItemLayout` 的不同, 位置在卡片底部或者最右侧。 | `Array<TemplateRef<void>>` | - |
+| nzExtra | 额外内容, 通常用在 `nzItemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | `TemplateRef` | - |
 
 ### nz-list-item-meta
 

diff --git a/components/list/list.spec.ts b/components/list/list.spec.ts
@@ -172,7 +172,10 @@ describe('list', () => {
     [nzLoading]="nzLoading"
     [nzSize]="nzSize"
     [nzSplit]="nzSplit"
-    [nzGrid]="nzGrid">
+    [nzGrid]="nzGrid"
+    [nzRenderItem]="item"
+    [nzLoadMore]="loadMore"
+    [nzPagination]="pagination">
     <ng-template #item let-item>
       <nz-list-item>
         <nz-list-item-meta
@@ -231,7 +234,7 @@ class TestListWithTemplateComponent {
 @Component({
   template: `
   <nz-list id="item-string">
-    <nz-list-item [nzContent]="'content'">
+    <nz-list-item [nzContent]="'content'" [nzActions]="[action]" [nzExtra]="extra">
       <ng-template #action><i class="anticon anticon-star-o" style="margin-right: 8px;"></i> 156</ng-template>
       <ng-template #extra>
         <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png">

diff --git a/components/list/nz-list-item.component.ts b/components/list/nz-list-item.component.ts
@@ -11,10 +11,10 @@ import { NzListItemMetaComponent } from './nz-list-item-meta.component';
     </div>
   </ng-template>
   <ng-template #actionsTpl>
-    <ul *ngIf="actions?.length > 0" class="ant-list-item-action">
-      <li *ngFor="let i of actions; let idx = index">
+    <ul *ngIf="nzActions?.length > 0" class="ant-list-item-action">
+      <li *ngFor="let i of nzActions; let idx = index">
         <ng-template [ngTemplateOutlet]="i"></ng-template>
-        <em *ngIf="idx!==actions.length-1" class="ant-list-item-action-split"></em>
+        <em *ngIf="idx!==nzActions.length-1" class="ant-list-item-action-split"></em>
       </li>
     </ul>
   </ng-template>
@@ -23,17 +23,17 @@ import { NzListItemMetaComponent } from './nz-list-item-meta.component';
     <ng-template [ngTemplateOutlet]="contentTpl"></ng-template>
     <ng-template [ngTemplateOutlet]="actionsTpl"></ng-template>
   </ng-template>
-  <div *ngIf="extra; else mainTpl" class="ant-list-item-extra-wrap">
+  <div *ngIf="nzExtra; else mainTpl" class="ant-list-item-extra-wrap">
     <div class="ant-list-item-main"><ng-template [ngTemplateOutlet]="mainTpl"></ng-template></div>
-    <div class="ant-list-item-extra"><ng-template [ngTemplateOutlet]="extra"></ng-template></div>
+    <div class="ant-list-item-extra"><ng-template [ngTemplateOutlet]="nzExtra"></ng-template></div>
   </div>`,
   preserveWhitespaces: false,
   host: {
     '[class.ant-list-item]': 'true'
   }
 })
 export class NzListItemComponent {
-  @ContentChildren('action') actions: QueryList<ElementRef>;
+  @Input() nzActions: Array<TemplateRef<void>> = [];
   @ContentChildren(NzListItemMetaComponent) metas: QueryList<NzListItemMetaComponent>;
 
   isCon = false;
@@ -51,5 +51,5 @@ export class NzListItemComponent {
     this.isCon = !!value;
   }
 
-  @ContentChild('extra') extra: TemplateRef<void>;
+  @Input() nzExtra: TemplateRef<void>;
 }
diff --git a/components/list/nz-list.component.ts b/components/list/nz-list.component.ts
@@ -12,7 +12,7 @@ import { ListSize, NzListGrid } from './interface';
   <ng-template #itemsTpl>
     <ng-container *ngFor="let item of nzDataSource; let index = index">
       <ng-template
-        [ngTemplateOutlet]="nzItem"
+        [ngTemplateOutlet]="nzRenderItem"
         [ngTemplateOutletContext]="{ $implicit: item, index: index }"></ng-template>
     </ng-container>
   </ng-template>
@@ -24,7 +24,7 @@ import { ListSize, NzListGrid } from './interface';
       <div nz-col [nzSpan]="nzGrid.span" [nzXs]="nzGrid.xs" [nzSm]="nzGrid.sm" [nzMd]="nzGrid.md" [nzLg]="nzGrid.lg" [nzXl]="nzGrid.xl" [nzXXl]="nzGrid.xxl"
           *ngFor="let item of nzDataSource; let index = index">
           <ng-template
-            [ngTemplateOutlet]="nzItem"
+            [ngTemplateOutlet]="nzRenderItem"
             [ngTemplateOutletContext]="{ $implicit: item, index: index }"></ng-template>
       </div>
     </div>
@@ -59,9 +59,9 @@ export class NzListComponent implements OnChanges {
 
   _isHeader = false;
   _header = '';
-  _headerTpl: TemplateRef<any>;
+  _headerTpl: TemplateRef<void>;
   @Input()
-  set nzHeader(value: string | TemplateRef<any>) {
+  set nzHeader(value: string | TemplateRef<void>) {
     if (value instanceof TemplateRef) {
       this._header = null;
       this._headerTpl = value;
@@ -74,9 +74,9 @@ export class NzListComponent implements OnChanges {
 
   _isFooter = false;
   _footer = '';
-  _footerTpl: TemplateRef<any>;
+  _footerTpl: TemplateRef<void>;
   @Input()
-  set nzFooter(value: string | TemplateRef<any>) {
+  set nzFooter(value: string | TemplateRef<void>) {
     if (value instanceof TemplateRef) {
       this._footer = null;
       this._footerTpl = value;
@@ -89,7 +89,7 @@ export class NzListComponent implements OnChanges {
 
   @Input() nzItemLayout: 'vertical' | 'horizontal' = 'horizontal';
 
-  @ContentChild('item') nzItem: TemplateRef<any>;
+  @Input() nzRenderItem: TemplateRef<void>;
 
   private _loading = false;
   @Input()
@@ -100,8 +100,8 @@ export class NzListComponent implements OnChanges {
     return this._loading;
   }
 
-  @ContentChild('loadMore') nzLoadMore: TemplateRef<any>;
-  @ContentChild('pagination') nzPagination: TemplateRef<any>;
+  @Input() nzLoadMore: TemplateRef<void>;
+  @Input() nzPagination: TemplateRef<void>;
 
   @Input() nzSize: ListSize = 'default';