如何掌握Angular高效开发技巧？
- 内容介绍
- 文章标签
- 相关推荐
本文共计979个文字，预计阅读时间需要4分钟。
避免生成css、ng、g+c等命令，以下是对给定内容的简化
typescript数据结构渲染Form表单import { Validators } from '@angular/forms';const dateForm={ sex: { value: null, required: true, maxLength: 10 }, gender: { value: 20, required: true },};interface formObj { v}
避免生成cssng g c xxx --style=none
数据结构渲染Form表单
import {Validators} from "@angular/forms";
const dateForm = {
sex: {value: null, required: true, maxLength: 10},
gender: {value: 20, required: true,},
}
interface formObj {
value: null | string | number,
required: boolean,
maxLength?: number
}
interface dateType {
[propName: string]: formObj
}
const hasArr = (dataForm: dateType) => {
const obj = Object.create(null);
for (const item in dataForm) {
const keyArr: any = [dataForm[item].value, []];
if (dataForm[item].required) {
keyArr[1].push = Validators.required
}
if (dataForm[item].maxLength) {
keyArr[1].push = Validators.maxLength(dataForm[item].maxLength as number)
}
obj[item] = keyArr
}
return obj
}
this.fb.group(hasArr(dataForm))
行内样式
<div [style.max-width.%]="cardWidth"
[style.-webkit-box-flex]="1"> </div>
时间选择器
<nz-date-picker
#endDatePicker
[nzDisabledDate]="getDisabledEndDate"
[nzDisabledTime]="getDisabledEndTime"
[nzShowTime]="{
nzFormat: 'HH:mm',
nzHideDisabledOptions: true
}"
nzFormat="yyyy-MM-dd HH:mm"
[(ngModel)]="selectedEndDate"
nzPlaceHolder="结束时间"
(nzOnOpenChange)="handleEndOpenChange($event)"
></nz-date-picker>
// 禁用的时分秒
getDisabledEndDate = () => (d: Date) => {
const bt = moment(this.selectedBeginDate).startOf('day').valueOf();
const et = moment(this.endTime).endOf('day').valueOf();
return d.getTime() < bt || d.getTime() > et;
};
getDisabledEndTime = () => (currentDate: Date) => {
const isSameDateWithEndDate = moment(currentDate).isSame(moment(this.endTime), 'date');
const isSameHourWithEndHour = moment(currentDate).isSame(moment(this.endTime), 'hour');
const isSameDateWithSelectedBeginDate = moment(currentDate).isSame(moment(this.selectedBeginDate), 'date');
const isSameHourWithSelectedBeginHour = moment(currentDate).isSame(moment(this.selectedBeginDate), 'hour');
this.disabledEndTime = this.getDisabledEndTime();
const disabledHours = [];
const disabledMinutes = [];
if (isSameDateWithEndDate) {
for (let i = moment(this.endTime).hour() + 1; i < 24; i++) {
disabledHours.push(i);
}
if (isSameHourWithEndHour) {
for (let i = moment(this.endTime).minute() + 1; i < 60; i++) {
disabledMinutes.push(i);
}
}
}
if (isSameDateWithSelectedBeginDate) {
for (let i = 0; i < moment(this.selectedBeginDate).hour() + (moment(this.selectedBeginDate).minute() === 59 ? 1 : 0); i++) {
disabledHours.push(i);
}
if (isSameHourWithSelectedBeginHour) {
for (let i = 0; i <= moment(this.selectedBeginDate).minute(); i++) {
disabledMinutes.push(i);
}
}
}
return {
nzDisabledHours: () => {
return disabledHours;
},
nzDisabledMinutes: (hour) => {
return disabledMinutes;
},
};
};
scrollIntoView
方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见
scrollIntoView({ behavior: 'smooth', block: 'center' });
主题切换如果让父子css同步
想到一个比较使用的思路
<app-has-error [classInput]="one"></app-has-error>
<button (click)="toggleClick()">toggle</button>
one: string = 'aaa'
toggleClick() {
this.one = this.one === 'aaa' ? 'bbb' : 'aaa';
}
子组件
<div [class]="classInput">
</div>
@Input() classInput: string = 'aaa'
.aaa{
--aa:#000;
}
.bbb{
--aa:red;
}
.text-app{
background-color: var(--aa);
}
或者用::ng-deep
父组件返回子组件的css
父html
<app-text3 class="app-text3"></app-text3>
子html
<div class="app1">测试1</div>
// 这种不推荐, 这样就编程全局的样式
::ng-deep .app-text3 {
.app1 {
background-color: red;
}
}
// 这种是通过编译后的组件去找子组件的css
.app-text3 {
::ng-deep .app1 {
background-color: red;
}
}
:host-context
子添加父组件的css, 可以形成独特性
父html
<app-text3 class="app-text3"></app-text3> // 有效
<app-text3 class="app-text2"></app-text3> // 无效
子的css
:host-context(.app-text3) {
.app1 {
background-color: red;
}
}
动态加载js
github.com/angular/components/tree/master/src/google-maps#readme
模块
@NgModule({
imports: [
+ HttpClientModule,
+ HttpClientJsonpModule,
],
})
组件
export class GoogleMapsDemoComponent {
apiLoaded: Observable<boolean>;
constructor(maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE', 'callback')
.pipe(
map(() => true),
catchError(() => of(false)),
);
}
}
retry
就是当请求失败重试几次
const source = interval(1000);
const example = source.pipe(
mergeMap(val => {
if(val > 5){
return throwError('Error!');
}
return of(val);
}),
//retry 2 times on error
retry(2)
);
jq使用
npm install jquery -S
npm install @types/jquery -D
angular.json
"scripts": [
+ "node_modules/jquery/dist/jquery.min.js"
]
使用
import * as $ from 'jquery';
或者
declare var $:any;
$('p')
决定自己的高度的是你的态度，而不是你的才能
记得我们是终身初学者和学习者
总有一天我也能成为大佬
本文共计979个文字，预计阅读时间需要4分钟。
避免生成css、ng、g+c等命令，以下是对给定内容的简化
typescript数据结构渲染Form表单import { Validators } from '@angular/forms';const dateForm={ sex: { value: null, required: true, maxLength: 10 }, gender: { value: 20, required: true },};interface formObj { v}
避免生成cssng g c xxx --style=none
数据结构渲染Form表单
import {Validators} from "@angular/forms";
const dateForm = {
sex: {value: null, required: true, maxLength: 10},
gender: {value: 20, required: true,},
}
interface formObj {
value: null | string | number,
required: boolean,
maxLength?: number
}
interface dateType {
[propName: string]: formObj
}
const hasArr = (dataForm: dateType) => {
const obj = Object.create(null);
for (const item in dataForm) {
const keyArr: any = [dataForm[item].value, []];
if (dataForm[item].required) {
keyArr[1].push = Validators.required
}
if (dataForm[item].maxLength) {
keyArr[1].push = Validators.maxLength(dataForm[item].maxLength as number)
}
obj[item] = keyArr
}
return obj
}
this.fb.group(hasArr(dataForm))
行内样式
<div [style.max-width.%]="cardWidth"
[style.-webkit-box-flex]="1"> </div>
时间选择器
<nz-date-picker
#endDatePicker
[nzDisabledDate]="getDisabledEndDate"
[nzDisabledTime]="getDisabledEndTime"
[nzShowTime]="{
nzFormat: 'HH:mm',
nzHideDisabledOptions: true
}"
nzFormat="yyyy-MM-dd HH:mm"
[(ngModel)]="selectedEndDate"
nzPlaceHolder="结束时间"
(nzOnOpenChange)="handleEndOpenChange($event)"
></nz-date-picker>
// 禁用的时分秒
getDisabledEndDate = () => (d: Date) => {
const bt = moment(this.selectedBeginDate).startOf('day').valueOf();
const et = moment(this.endTime).endOf('day').valueOf();
return d.getTime() < bt || d.getTime() > et;
};
getDisabledEndTime = () => (currentDate: Date) => {
const isSameDateWithEndDate = moment(currentDate).isSame(moment(this.endTime), 'date');
const isSameHourWithEndHour = moment(currentDate).isSame(moment(this.endTime), 'hour');
const isSameDateWithSelectedBeginDate = moment(currentDate).isSame(moment(this.selectedBeginDate), 'date');
const isSameHourWithSelectedBeginHour = moment(currentDate).isSame(moment(this.selectedBeginDate), 'hour');
this.disabledEndTime = this.getDisabledEndTime();
const disabledHours = [];
const disabledMinutes = [];
if (isSameDateWithEndDate) {
for (let i = moment(this.endTime).hour() + 1; i < 24; i++) {
disabledHours.push(i);
}
if (isSameHourWithEndHour) {
for (let i = moment(this.endTime).minute() + 1; i < 60; i++) {
disabledMinutes.push(i);
}
}
}
if (isSameDateWithSelectedBeginDate) {
for (let i = 0; i < moment(this.selectedBeginDate).hour() + (moment(this.selectedBeginDate).minute() === 59 ? 1 : 0); i++) {
disabledHours.push(i);
}
if (isSameHourWithSelectedBeginHour) {
for (let i = 0; i <= moment(this.selectedBeginDate).minute(); i++) {
disabledMinutes.push(i);
}
}
}
return {
nzDisabledHours: () => {
return disabledHours;
},
nzDisabledMinutes: (hour) => {
return disabledMinutes;
},
};
};
scrollIntoView
方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见
scrollIntoView({ behavior: 'smooth', block: 'center' });
主题切换如果让父子css同步
想到一个比较使用的思路
<app-has-error [classInput]="one"></app-has-error>
<button (click)="toggleClick()">toggle</button>
one: string = 'aaa'
toggleClick() {
this.one = this.one === 'aaa' ? 'bbb' : 'aaa';
}
子组件
<div [class]="classInput">
</div>
@Input() classInput: string = 'aaa'
.aaa{
--aa:#000;
}
.bbb{
--aa:red;
}
.text-app{
background-color: var(--aa);
}
或者用::ng-deep
父组件返回子组件的css
父html
<app-text3 class="app-text3"></app-text3>
子html
<div class="app1">测试1</div>
// 这种不推荐, 这样就编程全局的样式
::ng-deep .app-text3 {
.app1 {
background-color: red;
}
}
// 这种是通过编译后的组件去找子组件的css
.app-text3 {
::ng-deep .app1 {
background-color: red;
}
}
:host-context
子添加父组件的css, 可以形成独特性
父html
<app-text3 class="app-text3"></app-text3> // 有效
<app-text3 class="app-text2"></app-text3> // 无效
子的css
:host-context(.app-text3) {
.app1 {
background-color: red;
}
}
动态加载js
github.com/angular/components/tree/master/src/google-maps#readme
模块
@NgModule({
imports: [
+ HttpClientModule,
+ HttpClientJsonpModule,
],
})
组件
export class GoogleMapsDemoComponent {
apiLoaded: Observable<boolean>;
constructor(maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE', 'callback')
.pipe(
map(() => true),
catchError(() => of(false)),
);
}
}
retry
就是当请求失败重试几次
const source = interval(1000);
const example = source.pipe(
mergeMap(val => {
if(val > 5){
return throwError('Error!');
}
return of(val);
}),
//retry 2 times on error
retry(2)
);
jq使用
npm install jquery -S
npm install @types/jquery -D
angular.json
"scripts": [
+ "node_modules/jquery/dist/jquery.min.js"
]
使用
import * as $ from 'jquery';
或者
declare var $:any;
$('p')
决定自己的高度的是你的态度，而不是你的才能
记得我们是终身初学者和学习者
总有一天我也能成为大佬