refactor(all): use input instead of ContentChild (#192)

ng-alain · Oct 1, 2018 · cfd0497 · cfd0497
1 parent d2c89ca
commit cfd0497
Show file tree

Hide file tree

Showing 15 changed files with 278 additions and 164 deletions.
diff --git a/docs/upgrade-v2.en-US.md b/docs/upgrade-v2.en-US.md
diff --git a/docs/upgrade-v2.zh-CN.md b/docs/upgrade-v2.zh-CN.md
@@ -82,13 +82,50 @@ ng-alain 2.0 启用全新的 [ng-alain 组织](https://github.com/ng-alain/)，
 | `simple-html-form`  | `se`     | -         | -    |
 | `standard-form-row` | `se`     | -         | -    |
 
+例如：
+
+```diff
+- <simple-table></simple-table>
++ <st></st>
+```
+
+### 使用 `Input` 替代 `ContentChild`
+
+| 所属组件         | 原ContentChild | 新属性名     | ng update | 描述 |
+|------------------|----------------|--------------|-----------|------|
+| `st`             | `body`         | `body`       | √         | -    |
+| `st`             | `expand`       | `expand`     | √         | -    |
+| `footer-toolbar` | `extra`        | `extra`      | √         | -    |
+| `page-header`    | `breadcrumb`   | `breadcrumb` | √         | -    |
+| `page-header`    | `logo`         | `logo`       | √         | -    |
+| `page-header`    | `action`       | `action`     | √         | -    |
+| `page-header`    | `content`      | `content`    | √         | -    |
+| `page-header`    | `extra`        | `extra`      | √         | -    |
+| `page-header`    | `tab`          | `tab`        | √         | -    |
+
+例如：
+
+```diff
+- <page-header>
++ <page-header [action]="action">
+-   <ng-template #action></ng-template>
+- </page-header>
+```
+
 ### abc 类库组件属性名变更
 
-| 所属组件         | 原属性名     | 新属性名   | ng update | 描述                             |
-| ---------------- | ------------ | ---------- | --------- | -------------------------------- |
-| `na-page-header` | `home_link`  | `homeLink` | -         | -                                |
-| `na-page-header` | `home_i18n`  | `homeI18n` | -         | -                                |
-| `st`             | `sortReName` | 移除       | ×         | 仅使用 `STColumn.sort.reName` 值 |
+| 所属组件      | 原属性名     | 新属性名   | ng update | 描述                             |
+|---------------|--------------|------------|-----------|----------------------------------|
+| `page-header` | `home_link`  | `homeLink` | -         | -                                |
+| `page-header` | `home_i18n`  | `homeI18n` | -         | -                                |
+| `st`          | `sortReName` | 移除       | ×         | 仅使用 `STColumn.sort.reName` 值 |
+
+例如：
+
+```diff
+- <page-header home_link="/">
++ <page-header homeLink="/">
+```
 
 ### abc 类库组件配置变更
 
@@ -132,6 +169,13 @@ ng-alain 2.0 启用全新的 [ng-alain 组织](https://github.com/ng-alain/)，
 
 > 一个示例说明 [#diff](https://github.com/ng-alain/ng-alain/pull/673/files#diff-f573fc0900f21b377dac432f1668c584L164)
 
+例如：
+
+```diff
+- <simple-table [extraParams]="params" [reqReName]="reqReName">
++ <st [req]="{params: params, reName: reqReName}">
+```
+
 #### 列描述
 
 将所有 `type` 所对应的属性重新定义为独立子属性使其列描述的定义更内聚，原 `SimpleTableColumn` 替换 `STColumn`。

diff --git a/packages/abc/footer-toolbar/demo/basic.md b/packages/abc/footer-toolbar/demo/basic.md
@@ -16,8 +16,8 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
     <nz-form-control [nzValidateStatus]="name">
       <input nz-input formControlName="name" placeholder="required">
     </nz-form-control>
-    <footer-toolbar errorCollect>
-      <button nz-button [nzType]="'primary'">Submit</button>
+    <footer-toolbar errorCollect extra="This is extra area">
+      <button nz-button nzType="primary">Submit</button>
     </footer-toolbar>
   </form>
     `

diff --git a/packages/abc/footer-toolbar/footer-toolbar.component.html b/packages/abc/footer-toolbar/footer-toolbar.component.html
@@ -0,0 +1,7 @@
+<div class="footer-toolbar__left">
+  <ng-container *ngIf="_extra; else _extraTpl">{{_extra}}</ng-container>
+</div>
+<div class="footer-toolbar__right">
+  <error-collect *ngIf="errorCollect"></error-collect>
+  <ng-content></ng-content>
+</div>
diff --git a/packages/abc/footer-toolbar/footer-toolbar.component.ts b/packages/abc/footer-toolbar/footer-toolbar.component.ts
@@ -5,7 +5,6 @@ import {
   OnDestroy,
   Inject,
   TemplateRef,
-  ContentChild,
   ElementRef,
   Renderer2,
 } from '@angular/core';
@@ -17,22 +16,25 @@ const CLSBODY = 'footer-toolbar__body';
 
 @Component({
   selector: 'footer-toolbar',
-  template: `
-  <div class="footer-toolbar__left"><ng-container *ngIf="extra" [ngTemplateOutlet]="extra"></ng-container></div>
-  <div class="footer-toolbar__right">
-    <error-collect *ngIf="errorCollect"></error-collect>
-    <ng-content></ng-content>
-  </div>
-  `,
+  templateUrl: './footer-toolbar.component.html',
   preserveWhitespaces: false,
 })
 export class FooterToolbarComponent implements OnInit, OnDestroy {
   @Input()
   @InputBoolean()
   errorCollect = false;
 
-  @ContentChild('extra')
-  extra: TemplateRef<any>;
+  _extra = '';
+  _extraTpl: TemplateRef<any>;
+  @Input()
+  set extra(value: string | TemplateRef<any>) {
+    if (value instanceof TemplateRef) {
+      this._extra = null;
+      this._extraTpl = value;
+    } else {
+      this._extra = value;
+    }
+  }
 
   constructor(
     private el: ElementRef,

diff --git a/packages/abc/footer-toolbar/footer-toolbar.spec.ts b/packages/abc/footer-toolbar/footer-toolbar.spec.ts
@@ -12,45 +12,58 @@ describe('abc: footer-toolbar', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        ErrorCollectModule.forRoot(),
-        FooterToolbarModule.forRoot(),
-      ],
+      imports: [ErrorCollectModule.forRoot(), FooterToolbarModule.forRoot()],
       declarations: [TestComponent],
     });
+  });
+
+  function create() {
     fixture = TestBed.createComponent(TestComponent);
     dl = fixture.debugElement;
     context = fixture.componentInstance;
     fixture.detectChanges();
-  });
+  }
 
   it('should be create', () => {
+    create();
     expect(dl.queryAll(By.css('.footer-toolbar')).length).toBe(1);
   });
 
   it('should be load error-collect', () => {
+    create();
     context.errorCollect = true;
     fixture.detectChanges();
     expect(dl.queryAll(By.css('error-collect')).length).toBe(1);
   });
 
-  it('should be custom extra template', () => {
-    expect(dl.queryAll(By.css('#extra')).length).toBe(1);
+  describe('#extra', () => {
+    it('with string', () => {
+      create();
+      const left = dl.query(By.css('.footer-toolbar__left'))
+        .nativeElement as HTMLElement;
+      expect(left.textContent.trim()).toBe(`1`);
+    });
+    it('with custom template', () => {
+      TestBed.overrideTemplate(
+        TestComponent,
+        `
+      <footer-toolbar [extra]="extra">
+        <ng-template #extra><div id="extra">1</div></ng-template>
+      </footer-toolbar>
+      `,
+      );
+      create();
+      expect(dl.queryAll(By.css('#extra')).length).toBe(1);
+    });
   });
 });
 
 @Component({
   template: `
-    <form>
-        <footer-toolbar [errorCollect]="errorCollect">
-            <ng-template #extra>
-                <p id="extra">extra</p>
-            </ng-template>
-            <button>Submit</button>
-        </footer-toolbar>
-    </form>
-    `,
+  <form><footer-toolbar [errorCollect]="errorCollect" [extra]="extra"></footer-toolbar></form>
+  `,
 })
 class TestComponent {
   errorCollect = true;
+  extra = '1';
 }
diff --git a/packages/abc/page-header/demo/image.md b/packages/abc/page-header/demo/image.md
@@ -14,33 +14,34 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'app-demo',
     template: `
-<page-header [title]="'卡片列表'">
-    <ng-template #breadcrumb>
-        <nz-breadcrumb>
-            <nz-breadcrumb-item><a>一级菜单</a></nz-breadcrumb-item>
-            <nz-breadcrumb-item><a>二级菜单</a></nz-breadcrumb-item>
-            <nz-breadcrumb-item><a>三级菜单</a></nz-breadcrumb-item>
-        </nz-breadcrumb>
-    </ng-template>
-    <ng-template #extra>
-        <div style="margin-top: -60px; text-align: center; width: 195px;">
-            <img class="img-fluid" src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png">
-        </div>
-    </ng-template>
-    <ng-template #content>
-        <p>段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。</p>
-        <div class="d-flex pt-md">
-            <a class="d-flex pr-lg">
-                <img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />快速开始
-            </a>
-            <a class="d-flex pr-lg">
-                <img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />产品简介
-            </a>
-            <a class="d-flex">
-                <img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />产品文档
-            </a>
-        </div>
-    </ng-template>
+<page-header [title]="'卡片列表'"
+  [breadcrumb]="breadcrumb" [extra]="extra" [content]="content">
+  <ng-template #breadcrumb>
+    <nz-breadcrumb>
+      <nz-breadcrumb-item><a>一级菜单</a></nz-breadcrumb-item>
+      <nz-breadcrumb-item><a>二级菜单</a></nz-breadcrumb-item>
+      <nz-breadcrumb-item><a>三级菜单</a></nz-breadcrumb-item>
+    </nz-breadcrumb>
+  </ng-template>
+  <ng-template #extra>
+    <div style="margin-top: -60px; text-align: center; width: 195px;">
+      <img class="img-fluid" src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png">
+    </div>
+  </ng-template>
+  <ng-template #content>
+    <p>段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。</p>
+    <div class="d-flex pt-md">
+      <a class="d-flex pr-lg">
+        <img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />快速开始
+      </a>
+      <a class="d-flex pr-lg">
+        <img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />产品简介
+      </a>
+      <a class="d-flex">
+        <img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />产品文档
+      </a>
+    </div>
+  </ng-template>
 </page-header>
     `
 })

diff --git a/packages/abc/page-header/demo/simple.md b/packages/abc/page-header/demo/simple.md
@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-demo',
   template: `
-  <page-header [title]="'页面标题'">
+  <page-header [title]="'页面标题'" [breadcrumb]="breadcrumb">
     <ng-template #breadcrumb>
       <nz-breadcrumb>
         <nz-breadcrumb-item><a>一级菜单</a></nz-breadcrumb-item>

diff --git a/packages/abc/page-header/demo/standard.md b/packages/abc/page-header/demo/standard.md
@@ -14,7 +14,8 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'app-demo',
     template: `
-<page-header [title]="'单号：234231029431'">
+<page-header [title]="'单号：234231029431'"
+    [breadcrumb]="breadcrumb" [logo]="logo" [action]="action" [extra]="extra" [content]="content" [tab]="tab">
     <ng-template #breadcrumb>
         <nz-breadcrumb>
             <nz-breadcrumb-item><a>一级菜单</a></nz-breadcrumb-item>

diff --git a/packages/abc/page-header/demo/structure.md b/packages/abc/page-header/demo/structure.md
@@ -14,20 +14,21 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'app-demo',
     template: `
-<page-header [title]="'title'">
+  <page-header [title]="'title'"
+    [breadcrumb]="breadcrumb" [logo]="logo" [action]="action" [extra]="extra" [content]="content" [tab]="tab">
     <ng-template #breadcrumb>面包屑</ng-template>
     <ng-template #logo><div class="logo">logo</div></ng-template>
     <ng-template #action><div class="action">action</div></ng-template>
     <ng-template #content><div class="desc">content</div></ng-template>
     <ng-template #extra><div class="extra">extra</div></ng-template>
     <ng-template #tab>
-        <nz-tabset [nzSize]="'default'">
-            <nz-tab nzTitle="页签一"></nz-tab>
-            <nz-tab nzTitle="页签二"></nz-tab>
-            <nz-tab nzTitle="页签三"></nz-tab>
-        </nz-tabset>
+      <nz-tabset [nzSize]="'default'">
+        <nz-tab nzTitle="页签一"></nz-tab>
+        <nz-tab nzTitle="页签二"></nz-tab>
+        <nz-tab nzTitle="页签三"></nz-tab>
+      </nz-tabset>
     </ng-template>
-</page-header>
+  </page-header>
     `,
     styles: [`
     :host ::ng-deep .logo {

diff --git a/packages/abc/page-header/page-header.component.ts b/packages/abc/page-header/page-header.component.ts
@@ -110,22 +110,22 @@ export class PageHeaderComponent
 
   paths: any[] = [];
 
-  @ContentChild('breadcrumb')
+  @Input()
   breadcrumb: TemplateRef<any>;
 
-  @ContentChild('logo')
+  @Input()
   logo: TemplateRef<any>;
 
-  @ContentChild('action')
+  @Input()
   action: TemplateRef<any>;
 
-  @ContentChild('content')
+  @Input()
   content: TemplateRef<any>;
 
-  @ContentChild('extra')
+  @Input()
   extra: TemplateRef<any>;
 
-  @ContentChild('tab')
+  @Input()
   tab: TemplateRef<any>;
 
   // endregion

diff --git a/packages/abc/page-header/page-header.spec.ts b/packages/abc/page-header/page-header.spec.ts
@@ -353,7 +353,8 @@ describe('abc: page-header', () => {
   template: `
     <page-header #comp [title]="title" [autoTitle]="autoTitle" [syncTitle]="syncTitle"
         [autoBreadcrumb]="autoBreadcrumb" [home]="home" [homeI18n]="homeI18n" [homeLink]="homeLink"
-        [fixed]="fixed">
+        [fixed]="fixed"
+        [breadcrumb]="breadcrumb" [logo]="logo" [action]="action" [extra]="extra" [content]="content" [tab]="tab">
         <ng-template #breadcrumb><div class="breadcrumb">面包屑</div></ng-template>
         <ng-template #logo><div class="logo">logo</div></ng-template>
         <ng-template #action><div class="action">action</div></ng-template>

diff --git a/packages/abc/table/index.en-US.md b/packages/abc/table/index.en-US.md
@@ -56,8 +56,8 @@ Property | Description | Type | Default
 `[rowClickTime]` | Click twice in the time range for double click, unit is millisecond | `number` | `200`
 `[header]` | Table header renderer | `string,TemplateRef<void>` | -
 `[footer]` | Table footer renderer | `string,TemplateRef<void>` | -
-`#body` | Table extra body renderer, generally used to add total rows | `TemplateRef<void>` | -
-`#expand` | Whether current column include expand icon | `TemplateRef<void>` | -
+`[body]` | Table extra body renderer, generally used to add total rows | `TemplateRef<void>` | -
+`[expand]` | Whether current column include expand icon | `TemplateRef<void>` | -
 `(change)` | Events | `EventEmitter<STChange>` | -
 `(error)` | Error event | `EventEmitter<STError>` | -
 (deprecated)`(sortChange)` | Sort event | `EventEmitter` | -

diff --git a/packages/abc/table/index.zh-CN.md b/packages/abc/table/index.zh-CN.md
@@ -56,8 +56,8 @@ config: STConfig
 `[rowClickTime]` | 行单击多少时长之类为双击（单位：毫秒） | `number` | `200`
 `[header]` | 表格标题 | `string,TemplateRef<void>` | -
 `[footer]` | 表格底部 | `string,TemplateRef<void>` | -
-`#body` | 表格额外内容，一般用于添加合计行 | `TemplateRef<void>` | -
-`#expand` | 当前列是否包含展开按钮，当数据源中包括 `expand` 表示展开状态 | `TemplateRef<void>` | -
+`[body]` | 表格额外内容，一般用于添加合计行 | `TemplateRef<void>` | -
+`[expand]` | 当前列是否包含展开按钮，当数据源中包括 `expand` 表示展开状态 | `TemplateRef<void>` | -
 `(change)` | 变化时回调，包括：`pi`、`ps`、`checkbox`、`radio`、`sort`、`filter`、`click`、`dblClick` 变动 | `EventEmitter<STChange>` | -
 `(error)` | 异常时回调 | `EventEmitter<STError>` | -
 (deprecated)`(sortChange)` | 排序回调 | `EventEmitter` | -

diff --git a/packages/abc/table/table.component.ts b/packages/abc/table/table.component.ts
@@ -202,10 +202,10 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input()
   footer: string | TemplateRef<void>;
   /** 额外 `body` 内容 */
-  @ContentChild('body')
+  @Input()
   body: TemplateRef<void>;
   /** `expand` 可展开，当数据源中包括 `expand` 表示展开状态 */
-  @ContentChild('expand')
+  @Input()
   expand: TemplateRef<{ $implicit: any; column: STColumn }>;
   @Input()
   noResult: string | TemplateRef<void>;