fix(module:transfer): change contentchild to input (#1099)

fix docs of demo

components/transfer/demo/advanced.ts

@@ -9,6 +9,8 @@ import { NzMessageService } from 'ng-zorro-antd';
       nzShowSearch
       [nzOperations]="['to right', 'to left']"
       [nzListStyle]="{'width.px': 250, 'height.px': 300}"
+      [nzRender]="render"
+      [nzFooter]="footer"
       (nzSelectChange)="select($event)"
       (nzChange)="change($event)">
       <ng-template #render let-item>

components/transfer/demo/basic.md

@@ -7,10 +7,10 @@ title:
 
 ## zh-CN
 
-最基本的用法，展示了 `dataSource`、`targetKeys`、每行的渲染函数 `render` 以及回调函数 `onChange` `onSelectChange` `onScroll` 的用法。
+最基本的用法，展示了 `nzDataSource` 每行的渲染函数 `nzRender` 以及回调函数 `nzChange`、`nzSelectChange` 的用法。
 
 ## en-US
 
-The most basic usage of `Transfer` involves providing the source data and target keys arrays, plus the rendering and some callback functions.
+The most basic usage of `nz-transfer` involves providing the source data and target keys arrays, plus the rendering and some callback functions.
 
 

components/transfer/demo/can-move.md

@@ -8,9 +8,9 @@ title:
 
 ## zh-CN
 
-利用 `canMove` 允许在穿梭过程中二次校验；示例默认向右移时强制第一项不可穿梭。
+利用 `nzCanMove` 允许在穿梭过程中二次校验；示例默认向右移时强制选中的第一项不可穿梭。
 
 ## en-US
 
-TODO
+Can use `nzCanMove` to do two-verification.
 

components/transfer/demo/can-move.ts

@@ -9,7 +9,7 @@ import { TransferCanMove, TransferItem, NzMessageService } from 'ng-zorro-antd';
   template: `
     <nz-transfer
       [nzDataSource]="list"
-      [canMove]="canMove"
+      [nzCanMove]="canMove"
       (nzSelectChange)="select($event)"
       (nzChange)="change($event)">
     </nz-transfer>

components/transfer/demo/custom-item.ts

@@ -7,6 +7,7 @@ import { NzMessageService } from 'ng-zorro-antd';
     <nz-transfer
       [nzDataSource]="list"
       [nzListStyle]="{'width.px': 300, 'height.px': 300}"
+      [nzRender]="render"
       (nzSelectChange)="select($event)"
       (nzChange)="change($event)">
       <ng-template #render let-item>

components/transfer/doc/index.en-US.md

@@ -23,13 +23,13 @@ One or more elements can be selected from either column, one click on the proper
 | nzListStyle | A custom CSS style used for rendering the transfer columns. equal `ngStyle` | object |  |
 | nzItemUnit | single unit | string | item |
 | nzItemsUnit | multiple unit | string | items |
-| #render | The function to generate the item shown on a column. please refer to the case. | `TemplateRef<void>` | - |
-| #footer | A function used for rendering the footer. please refer to the case. | `TemplateRef<void>` | - |
+| nzRender | The function to generate the item shown on a column. please refer to the case. | `TemplateRef<void>` | - |
+| nzFooter | A function used for rendering the footer. please refer to the case. | `TemplateRef<void>` | - |
 | nzShowSearch | If included, a search box is shown on each column. | boolean | false |
 | nzFilterOption | A function to determine whether an item should show in search result list | `(inputValue: string, item: TransferItem) => boolean` |
 | nzSearchPlaceholder | The hint text of the search box. | string | 'Search here' |
 | nzNotFoundContent | Text to display when a column is empty. | string | 'The list is empty' |
-| canMove | Two verification when transfer choice box. please refer to the case. | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
+| nzCanMove | Two verification when transfer choice box. please refer to the case. | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
 | (nzChange) | A callback function that is executed when the transfer between columns is complete. | `EventEmitter<TransferChange>` | - |
 | (nzSearchChange) | A callback function which is executed when search field are changed | `EventEmitter<TransferSearchChange>` | - |
 | (nzSelectChange) | A callback function which is executed when selected items are changed. | `EventEmitter<TransferSearchChange>` | - |

components/transfer/doc/index.zh-CN.md

@@ -25,13 +25,13 @@ title: Transfer
 | nzListStyle | 两个穿梭框的自定义样式，等同 `ngStyle` | object |  |
 | nzItemUnit | 单数单位 | string | 项目 |
 | nzItemsUnit | 复数单位 | string | 项目 |
-| #render | 每行数据渲染模板，见示例 | `TemplateRef<void>` | - |
-| #footer | 底部渲染模板，见示例 | `TemplateRef<void>` | - |
+| nzRender | 每行数据渲染模板，见示例 | `TemplateRef<void>` | - |
+| nzFooter | 底部渲染模板，见示例 | `TemplateRef<void>` | - |
 | nzShowSearch | 是否显示搜索框 | boolean | false |
 | nzFilterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | (inputValue, option): boolean | `(inputValue: string, item: TransferItem) => boolean` |
 | nzSearchPlaceholder | 搜索框的默认值 | string | '请输入搜索内容' |
 | nzNotFoundContent | 当列表为空时显示的内容 | string | '列表为空' |
-| canMove | 穿梭时二次校验。**注意：** 穿梭组件内部始终只保留一份数据，二次校验过程中需取消穿梭项则直接删除该项；具体用法见示例。 | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
+| nzCanMove | 穿梭时二次校验。**注意：** 穿梭组件内部始终只保留一份数据，二次校验过程中需取消穿梭项则直接删除该项；具体用法见示例。 | `(arg: TransferCanMove) => Observable<TransferItem[]>` | - |
 | (nzChange) | 选项在两栏之间转移时的回调函数 | `EventEmitter<TransferChange>` | - |
 | (nzSearchChange) | 搜索框内容时改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |
 | (nzSelectChange) | 选中项发生改变时的回调函数 | `EventEmitter<TransferSearchChange>` | - |

components/transfer/nz-transfer.component.ts

@@ -2,7 +2,6 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ContentChild,
   ElementRef,
   EventEmitter,
   Input,
@@ -29,13 +28,13 @@ import { TransferCanMove, TransferChange, TransferItem, TransferSearchChange, Tr
       [filter]="leftFilter"
       [filterOption]="nzFilterOption"
       (filterChange)="handleFilterChange($event)"
-      [render]="render"
+      [render]="nzRender"
       [showSearch]="nzShowSearch"
       [searchPlaceholder]="nzSearchPlaceholder"
       [notFoundContent]="nzNotFoundContent"
       [itemUnit]="nzItemUnit"
       [itemsUnit]="nzItemsUnit"
-      [footer]="footer"
+      [footer]="nzFooter"
       (handleSelect)="handleLeftSelect($event)"
       (handleSelectAll)="handleLeftSelectAll($event)"></nz-transfer-list>
     <div class="ant-transfer-operation">
@@ -52,13 +51,13 @@ import { TransferCanMove, TransferChange, TransferItem, TransferSearchChange, Tr
       [filter]="rightFilter"
       [filterOption]="nzFilterOption"
       (filterChange)="handleFilterChange($event)"
-      [render]="render"
+      [render]="nzRender"
       [showSearch]="nzShowSearch"
       [searchPlaceholder]="nzSearchPlaceholder"
       [notFoundContent]="nzNotFoundContent"
       [itemUnit]="nzItemUnit"
       [itemsUnit]="nzItemsUnit"
-      [footer]="footer"
+      [footer]="nzFooter"
       (handleSelect)="handleRightSelect($event)"
       (handleSelectAll)="handleRightSelectAll($event)"></nz-transfer-list>
   `,
@@ -81,9 +80,9 @@ export class NzTransferComponent implements OnChanges {
   @Input() nzListStyle: object;
   @Input() nzItemUnit = this.i18n.translate('Transfer.itemUnit');
   @Input() nzItemsUnit = this.i18n.translate('Transfer.itemsUnit');
-  @Input() canMove: (arg: TransferCanMove) => Observable<TransferItem[]> = (arg: TransferCanMove) => of(arg.list);
-  @ContentChild('render') render: TemplateRef<void>;
-  @ContentChild('footer') footer: TemplateRef<void>;
+  @Input() nzCanMove: (arg: TransferCanMove) => Observable<TransferItem[]> = (arg: TransferCanMove) => of(arg.list);
+  @Input() nzRender: TemplateRef<void>;
+  @Input() nzFooter: TemplateRef<void>;
 
   // search
   @Input()
@@ -167,7 +166,7 @@ export class NzTransferComponent implements OnChanges {
     this.updateOperationStatus(oppositeDirection, 0);
     const datasource = direction === 'left' ? this.rightDataSource : this.leftDataSource;
     const moveList = datasource.filter(item => item.checked === true && !item.disabled);
-    this.canMove({ direction, list: moveList })
+    this.nzCanMove({ direction, list: moveList })
     .subscribe(
       newMoveList => this.truthMoveTo(direction, newMoveList.filter(i => !!i)),
       () => moveList.forEach(i => i.checked = false)

components/transfer/transfer.spec.ts

@@ -237,7 +237,8 @@ describe('transfer', () => {
       [nzFilterOption]="nzFilterOption"
       [nzSearchPlaceholder]="nzSearchPlaceholder"
       [nzNotFoundContent]="nzNotFoundContent"
-      [canMove]="canMove"
+      [nzCanMove]="canMove"
+      [nzFooter]="footer"
       (nzSearchChange)="search($event)"
       (nzSelectChange)="select($event)"
       (nzChange)="change($event)">
@@ -295,6 +296,7 @@ class TestTransferComponent implements OnInit {
 @Component({
   template: `
     <nz-transfer #comp
+      [nzRender]="render"
       [nzDataSource]="nzDataSource">
       <ng-template #render let-item>
         <i class="anticon anticon-{{item.icon}}"></i> {{ item.title }}