NG ZORRO知识点总结

NG ZORRO的常用属性,包括但不限于,结合代码

<button nz-button [nzType]="'primary'" [nzSize]="'large'" [nzLoading]="loading" [nzDisabled]="disabled" (click)="onClick()">点击我</button>

nz-button是一个按钮组件，它有多个常用属性，如：nzType，nzSize，nzLoading和nzDisabled等。这些属性用于设置按钮的样式和状态。在这个例子中，按钮的类型为primary，大小为large，可以设置loading状态和禁用disabled状态，当按钮被点击时，会调用onClick方法。

<nz-modal [(nzVisible)]="isVisible" [nzTitle]="'弹出框标题'" [nzContent]="'这里是弹出框的内容。'" [nzFooter]="modalFooter" [nzMaskClosable]="false">
</nz-modal>

nz-modal是一个弹出框组件，它也有多个常用属性，如：nzTitle，nzContent，nzFooter，nzVisible和nzMaskClosable等。这些属性用于设置弹出框的标题、内容、底部按钮、可见性和遮罩层。在这个例子中，弹出框的标题为弹出框标题，内容为这里是弹出框的内容。，底部按钮使用了模板语法，点击确定按钮时会调用submit方法，点击取消或遮罩层时会关闭弹出框，但遮罩层不可关闭。

<ng-template #modalFooter>
  <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="isVisible = false">取消</button>
  <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="submit()">确定</button>
</ng-template>

定义了一个ng-template指令，本地变量名称为modalFooter，其中包含了两个按钮组件，用于作为弹出框组件nz-modal的底部按钮。

在这个模板中，第一个按钮组件有一个nzType属性设置为’default’，表示按钮类型为默认，nzSize属性设置为’large’，表示按钮大小为大号，click事件绑定了一个方法，用于关闭弹出框，这个方法会将isVisible属性设置为false，即关闭弹出框。

第二个按钮组件有一个nzType属性设置为’primary’，表示按钮类型为主要，nzSize属性设置为’large’，表示按钮大小为大号，click事件绑定了一个方法，用于提交表单或执行其他操作，这个方法名为submit()。

这个ng-template指令中的按钮组件可以被其他组件或指令调用和渲染，比如在nz-modal组件中，可以通过[nzFooter]属性来指定底部按钮的模板，这样就可以重用这个模板，避免了重复的代码和样式。

<form nz-form [nzLayout]="'horizontal'" (ngSubmit)="onSubmit()" #form="ngForm">
  <nz-form-item>
    <nz-form-label nzFor="name">姓名：</nz-form-label>
    <nz-form-control>
      <input nz-input type="text" id="name" name="name" [(ngModel)]="formData.name" nzRequired>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label nzFor="email">邮箱：</nz-form-label>
    <nz-form-control>
      <input nz-input type="email" id="email" name="email" [(ngModel)]="formData.email" nzRequired>
    </nz-form-control>
  </nz-form-item>
  <button nz-button nzType="primary" type="submit">提交</button>
</form>

Form表单：ng-zorro 的表单组件提供了多种属性和方法来控制表单的输入和验证。例如，表单组件的 nzLayout 属性可用于设置表单布局方式（水平布局、垂直布局等）；表单元素的 ngModel 属性可用于绑定表单元素的值，而 nzRequired 属性可用于设置表单元素的必填性。

<nz-input [(ngModel)]="inputValue" [nzSize]="'large'" (nzBlur)="onBlur()"></nz-input>

input配合ngModel使用,实现html和ts的双向数据绑定是非常经典的做法,此外nz-input提供了多种属性和事件来控制输入框的行为和样式。例如，输入框组件的 nzSize 属性可用于设置输入框的大小（large、default、small 等）；输入框的 (nzBlur) 事件可用于监听输入框失去焦点事件。

<nz-input-number [(ngModel)]="inputNumberValue" [nzSize]="'large'" (nzBlur)="onBlur()"></nz-input-number>

InputNumber数字输入框：ng-Zorro 的数字输入框组件提供了多种属性和事件来控制数字输入框的行为和样式。例如，数字输入框组件的 nzSize 属性可用于设置数字输入框的大小（large、default、small 等）；数字输入框的 (nzBlur) 事件用于监听数字输入框失去焦点事件。

<nz-mention [nzSuggestions]="suggestions" [(ngModel)]="mentionValue" (nzSelect)="onSelect($event)"></nz-mention>

Mention提及：ng-Zorro 的提及组件提供了多种属性和事件来控制提及的行为和样式。例如，提及组件的 nzSuggestions 属性可用于设置提供给用户选择的提及选项列表；提及组件的 (nzSelect) 事件可用于监听用户选择提及选项的事件。

<nz-divider [nzType]="'horizontal'">分割线</nz-divider>

Divider分割线：ng-Zorro 的分割线组件提供了多
种属性和样式来控制分割线的样式和行为。例如，分割线组件的 nzType 属性可用于设置分割线的类型（horizontal、vertical 等）；分割线组件的 nzText 属性可用于设置分割线中的文本内容。之前写过在分割线上添加文字的工作。

<nz-row [nzGutter]="16">
  <nz-col [nzSpan]="12">
    <div class="left-content">左边内容</div>
  </nz-col>
  <nz-col [nzSpan]="12">
    <div class="right-content">右边内容</div>
  </nz-col>
</nz-row>

Grid栅格：ng-Zorro 的栅格组件提供了多种属性和样式来控制栅格布局的方式和样式。例如，栅格组件的 nzGutter 属性可用于设置栅格间距；栅格组件的 nzSpan 属性可用于设置栅格所占据的列数。

<nz-layout [nzHasSider]="true">
  <nz-sider [nzWidth]="200">
    侧边栏
  </nz-sider>
  <nz-layout [nzContentStyle]="{ padding: '20px' }">
    <div class="main-content">主要内容区域</div>
  </nz-layout>
</nz-layout>

Layout布局：ng-Zorro 的布局组件提供了多种属性和样式来控制布局的方式和样式。例如，布局组件的 nzHasSider 属性可用于设置是否包含侧边栏；布局组件的 nzContentStyle 属性可用于设置主要内容区域的样式。

<nz-space [nzSize]="'large'" [nzDirection]="'horizontal'">
  <button nz-button>按钮1</button>
  <button nz-button>按钮2</button>
  <button nz-button>按钮3</button>
</nz-space>

Space间距：ng-Zorro 的间距组件提供了多种属性来控制元素之间的间距。例如，间距组件的 nzSize 属性可用于设置间距的大小；间距组件的 nzDirection 属性可用于设置间距的方向。

<nz-calendar [(ngModel)]="calendarValue" [nzMode]="'month'" (nzSelectChange)="onSelect($event)"></nz-calendar>

Calendar日历：ng-Zorro 的日历组件提供了多种属性和事件来控制日历的行为和样式。例如，日历组件的 nzMode 属性可用于设置日历的模式（月视图、年视图等）；日历组件的 (nzSelectChange) 事件可用于监听用户选择日期的事件。

<nz-card [nzTitle]="'卡片标题'" [nzCover]="coverImage">
  <p>卡片内容</p>
</nz-card>

Card卡片：ng-Zorro 的卡片组件提供了多种属性和样式来控制卡片的样式和行为。例如，卡片组件的 nzTitle 属性可用于设置卡片的标题；卡片组件的 nzCover 属性可用于设置卡片的封面图像。