Tabs

api

nzSelectChange: EventEmitter<{nzSelectedIndex: number,tab: NzTabComponent}>
nzSelect: EventEmitter，点击另外一个触发
nzClick: EventEmitter，点击当前也会触发 ```typescript import { Component, OnInit } from ‘@angular/core’;

@Component({ selector: ‘nz-demo-tabs-slide’, template: <nz-radio-group [(ngModel)]="nzTabPosition"> <label nz-radio-button [nzValue]="'top'">Horizontal</label> <label nz-radio-button [nzValue]="'left'">Vertical</label> </nz-radio-group> <nz-input-number style="float:right;" [nzMin]="0" [nzMax]="10" [(ngModel)]="selectedIndex"></nz-input-number> <nz-tabset style="height:220px;" [nzTabPosition]="nzTabPosition" [(nzSelectedIndex)]="selectedIndex" (nzSelectChange)="log([$event])" > <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.name" (nzSelect)="log(['select', tab])" (nzClick)="log(['click', tab])" (nzDeselect)="log(['deselect', tab])" > {{ tab.content }} </nz-tab> </nz-tabset> })

export class NzDemoTabsSlideComponent implements OnInit { tabs: Array<{ name: string; content: string }> = []; nzTabPosition = ‘top’; selectedIndex = 0;

/ tslint:disable-next-line:no-any / log(args: any[]): void { console.log(args); }

ngOnInit(): void { for (let i = 0; i < 11; i++) { this.tabs.push({ name: Tab ${i}, content: Content of tab ${i} }); } } }


<a name="Nw5hm"></a>
## tab路由联动模式
<a name="FrOsr"></a>
### 两种方式：
- 1. 直接路径匹配
- 2. queryParams匹配
```typescript
import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-tabs-link-router',
  template: `
    <nz-tabset nzLinkRouter>
      <nz-tab>
        <a nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'one' }" queryParamsHandling="merge">Default</a>
        Default.
      </nz-tab>
      <nz-tab>
        <a nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'two' }" queryParamsHandling="merge">Two</a>
        Two.
      </nz-tab>
      <nz-tab>
        <a nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'three' }" queryParamsHandling="merge">Three</a>
        Three.
      </nz-tab>
      <nz-tab>
        <a nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'four' }" queryParamsHandling="merge">Four</a>
        Four.
      </nz-tab>
    </nz-tabset>
  `
})
export class NzDemoTabsLinkRouterComponent {}

严格匹配

        <!-- BUG: 此ng-zorro版本的路由联动模式存在变更检测的bug -->
        <!-- 非严格模式匹配，切换二级标签时tab不变化 -->
        <nz-tabset nzLinkRouter [nzLinkExact]="false">
            <nz-tab>
                <a nz-tab-link [routerLink]="['./standard-category']" queryParamsHandling="merge">类目</a>
            </nz-tab>
            <nz-tab>
                <a nz-tab-link [routerLink]="['./standard-color']" queryParamsHandling="merge">颜色</a>
            </nz-tab>
            <nz-tab>
                <a nz-tab-link [routerLink]="['./field-classify']" queryParamsHandling="merge">字段分类</a>
            </nz-tab>
        </nz-tabset>
        <router-outlet></router-outlet>

Anchor

注意target容器

Modal

服务方式创建组件modal

nzContent , nzComponentParams

createComponentModal(): void {
  const modal = this.modalService.create({
    nzTitle: 'Modal Title',
    nzContent: NzModalCustomComponent,
    nzComponentParams: {
      title: 'title in component',
      subtitle: 'component sub title，will be changed after 2 sec'
    },
    nzFooter: [
      {
        label: 'change component title from outside',
        onClick: componentInstance => {
          componentInstance!.title = 'title in inner component is changed';
        }
      }
    ]
  });

// 外层组件中
modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
// Return a result when closed
modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
// delay until modal instance created
setTimeout(() => {
  const instance = modal.getContentComponent();
  instance.subtitle = 'sub title is changed';
}, 2000);

modal组件中依赖注入NzModalRef

export class NzModalCustomComponent {
  @Input() title: string;
  @Input() subtitle: string;
  constructor(private modal: NzModalRef) {}
  destroyModal(): void {
    this.modal.destroy({ data: 'this the result data' });
  }
}

template服务方式创建，及最简单的使用modal弹窗（无任何按钮，例如查看大图）

重点：

nzFooter: null,

版本9以上可通过nzComponentParams传入template的上下文，9以下只能绑定成员变量

 <ng-template #tplSimilarPicView>
     <div class="show-img">
         <img [src]="showImg" alt="图片打开失败">
     </div>
 </ng-template>

export class SimilarSearch {
 @ViewChild('tplSimilarPicView', { static: true }) tplSimilarPicView: TemplateRef<{}>;
onProductPicClick(selectProduct: SimlarSearchProduct) {
     this.selectProduct(selectProduct);
     // this.showProductPortrait(selectProduct);
     /** 7.15版本点击大图只展示一张放大图, 不调接口获取封面图的任何信息 */
     this.modalService.create({
         nzContent: this.tplSimilarPicView,
         nzFooter: null,
         nzClosable: false
     });
}

案例/字段重构

const modal = this.modalService.create({
nzTitle: '提交商品',
nzContent: SubmitChoose,
nzComponentParams: {},
nzOnOk: (comp) => {
 if (comp.isPartialSubmit) {
   this.popupPartialSave();
 } else {
   this.totalSubmit();
 }
}
});

upload

uploadFiles是每次上传的（数组时指，可能鼠标多选了几个）

 filters: UploadFilter[] = [
     {
         name: 'type',
         fn: (uploadFiles: UploadFile[]) => {
             return uploadFiles;
         }
     }
 ];

fileList是当前所有已上传的。这里列表只显示最新的这个。

onUploadChange($event) {
this.fileList = $event.fileList.slice(-1);  // 注意不能用splice，会破坏$event.fileList
}

Tree

什么是受控组件？目前看来是没有使用ViewChild
isHalfChecked 不会改变checkbox样式

nzCheckStrictly checkable 状态下节点选择完全受控（父子节点选中状态不再关联），即都是单个单个的选中，而不是所有子节点都选择的话则就选择父节点。不太好用，以下是手动控制选择子节点、父节点。

class Tree {
 /** 点选子节点 */
 checkNodeChildren(treeNode: NzTreeNode) {
     const children = treeNode.children;
     if (children && children.length) {
         children.forEach(child => {
             child.isChecked = treeNode.isChecked;
             this.checkNodeChildren(child);
         });
     }
 }
 /** 点选父节点 */
 checkParent(treeNode: NzTreeNode) {
     const parent = treeNode.parentNode;
     if (parent) {
         parent.isChecked = this.isAllNodesChecked(parent.children);
         parent.isHalfChecked = this.isIndeterminate(parent.children);
         this.checkParent(parent);
     }
 }
 private isAllNodesChecked(nodes: NzTreeNode[]) {
     return nodes.every((node: NzTreeNode) => node.isChecked);
 }
 private isIndeterminate(nodes: NzTreeNode[]) {
     return nodes.some((child: NzTreeNode) => child.isChecked) && !this.isAllNodesChecked(nodes);
 }
}

若要选择父节点时也同时选择其下的所有子节点，如下:

 getCheckedNodes(): NzTreeNode[] {
     const checkedNodes = this.categoryTree.getCheckedNodeList();
     return checkedNodes.concat(flatten(checkedNodes.map(node => node.children || [])));
 }

[nzBlockNode]属性

节点（非叶子）为display: block，占据一行

【前端】Angular

NG-ZORRO