Angular11+Antd笔记

Edited on 2022-07-04 In 前端 , Angular , AntD

前言

笔记：记录组件使用

`antd` 构建 `home` 页面

1	ng g ng-zorro-antd-mobile:tab-bar-basic -p app --path="src/app/pages" --styleext='less' --name=home

其中 html 中的标签属性，可以参考后面的文档记录。

引入其它插件

引入 `Lodash`

`npm` 安装

1
2
3

npm i lodash --save
# TypeScript 提醒
npm i --save-dev @types/lodash

`yarn` 安装

1
2
3

yarn add lodash
# TypeScript 提醒
yarn add @types/lodash --dev

使用

1	import * as _ from 'lodash';

tsconfig.json 中

{
  "compilerOptions": {
    "types": [
      "lodash"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

angular.json 中

{
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "allowedCommonJsDependencies": [
      "lodash"
    ]
  }
}

文档记录

建议查询官方文档,下面只是简单的记录
Angular

`TabBar` 属性

参数	说明	类型	默认值
`[activeTab]`	当前激活Tab索引	`number`	`0`
`[barTintColor]`	tabbar 背景色	`string`	`'white'`
`[tintColor]`	选中的字体颜色	`string`	`'#108ee9'`
`[unselectedTintColor]`	未选中的字体颜色	`string`	`'#888'`
`[hidden]`	是否隐藏	`boolean`	`false`
`[tabBarPosition]`	tabbar 位置	`’top’	‘bottom’`
`[prerenderingSiblingsNumber]`	预加载两侧Tab数量, -1: 加载所有的tab内容, 0: 仅加载当前tab内容, n: 预加载两侧n个Tab	`number`	`-1`
`(onPress)`	bar 点击触发	`EventEmitter<{index: number, title: string, key: string}>`	-

`TabBarItem` 属性

参数	说明	类型	默认值
`[badge]`	徽标数	`number	string`
`[dot]`	是否在右上角显示小红点（在设置badge的情况下失效）	`boolean`	`false`
`[icon]`	默认展示的内容	`TemplateRef`	-
`[selectedIcon]`	选中后展示的内容	`TemplateRef`	-
`[title]`	标题文字	`string`	-
`[key]`	唯一标识	`string`	-

DatePicker

参数	说明	类型	默认值
`[mode]`	日期选择的类型	`’year’	‘month’
`[minDate]`	最小可选日期	`Date`	`2000-1-1`
`[maxDate]`	最大可选日期	`Date`	`2030-1-1`
`[minuteStep]`	分钟数递增步长设置	`number`	`1`
`[locale]`	国际化，可覆盖全局`[LocaleProvider](https://ng.mobile.ant.design/components/locale-provider/zh)`的配置	`{DatePickerLocale: {year, month, day, hour, minute, am?, pm?}, okText, dismissText }`	-
`[disabled]`	是否不可用	`boolean`	`false`
`[showErrorToast]`	显示Toast错误信息	`boolean`	`true`
`[showErrorToastInterval]`	Toast错误信息显示时间	`number`	`2000`
`[title]`	弹框的标题	`string	TemplateRef`
`[(ngModel)]`	当前选中时间	`Date`	`new Date()`
`(onValueChange)`	每列 picker 改变时的回调	`EventEmitter<{date: object, index: string}>`	-
`(onOk)`	点击选中时执行的回调	`EventEmitter<Date>`	-
`(onDismiss)`	点击取消时执行的回调	`EventEmitter<void>`	-

注意：日期字符串在不同浏览器有不同的实现，例如 new Date('2017-1-1') 在 Safari 上是 Invalid Date，而在 Chrome 上是能正常解析的。

注意：DatePicker children 建议是 ListItem, 如果不是，需要是自定义组件(组件内需处理 onClick / extra / children 属性)

`TextareaItem`

参数	说明	类型	默认值
`[value]`	value	`string`	-
`[defaultValue]`	设置初始默认值	`string`	-
`[placeholder]`	placeholder	`string`	-
`[editable]`	是否可编辑	`boolean`	`true`
`[disabled]`	是否禁用	`boolean`	`false`
`[clear]`	是否带清除功能(仅`editable`为`true`,`disabled`为`false`才生效)	`boolean`	`false`
`[rows]`	显示几行	`number`	`1`
`[count]`	计数功能,兼具最大长度,默认为0,代表不开启计数功能	`number`	-
`[error]`	报错样式	`boolean`	`false`
`[autoHeight]`	高度自适应, autoHeight 和 rows 请二选一	`boolean`	`false`
`[autoFocus]`	初始化自动获得焦点	`boolean`	`false`
`[labelNumber]`	定宽枚举值：`num * @input-label-width: 34px`，可用`2-7`之间的数字，一般(不能保证全部)能对应显示出相应个数的中文文字(不考虑英文字符)	`number`	`5`
`[name]`	textarea 的 name	`string`	-
`[prefixListCls]`	列表 className 前缀	`string`	`'am-list'`
`[title]`	文案说明	`string	TemplateRef`
`[focus]`	强制获得焦点	`{ focus: boolean }`	-
`[(ngModel)]`	value	`string`	-
`(onChange)`	change 事件触发的回调函数	`EventEmitter<string>`	-
`(onBlur)`	blur 事件触发的回调函数	`EventEmitter<string>`	-
`(onFocus)`	focus 事件触发的回调函数	`EventEmitter<string>`	-
`(onErrorClick)`	点击报错 icon 触发的回调	`EventEmitter<void>`	-

`switch`

参数	说明	类型	默认值
`[checked]`	是否默认选中	`boolean`	`false`
`[disabled]`	是否不可修改	`boolean`	`false`
`[color]`	开关打开后的颜色	`string`	`'#4dd865'`
`[name]`	switch 的 name	`string`	-
`[platform]`	设定组件的平台特有样式	`’ios’	‘android’`
`[(ngModel)]`	当前值	`boolean`	`false`
`(onChange)`	change 事件触发的回调函数	`EventEmitter<boolean>`	-
`(onClick)`	click事件触发的回调函数，当switch为disabled时，入参的值始终是默认传入的checked值	`EventEmitter<boolean>`	-

Drawer抽屉

参数	说明	类型	默认值
`[sidebar]`	抽屉里的内容	`TemplateRef`	-
`[open]`	开关状态	`boolean`	`false`
`[position]`	抽屉所在位置	`’left’	‘right’
`[sidebarStyle]`	-	`object`	`{}`
`[contentStyle]`	-	`object`	`{}`
`[overlayStyle]`	-	`object`	`{}`
`[dragHandleStyle]`	-	`object`	`{}`
`[touch]`	是否开启触摸手势	`boolean`	`true`
`[transitions]`	是否开启动画	`boolean`	`true`
`[docked]`	是否嵌入到正常文档流里	`boolean`	`false`
`[enableDragHandle]`	是否启用 dragHandle	`boolean`	`false`
`[dragToggleDistance]`	打开/关闭抽屉时距 sidebar 的拖动距离	`number`	`30`
`(onOpenChange)`	open 状态切换时调用	`EventEmitter<boolean>`	-

本文地址： https://github.com/maxzhao-it/blog/post/530/

前言

antd 构建 home 页面

引入其它插件

引入 Lodash

npm 安装

yarn 安装

使用