![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
angular
桐溪漂流
一个web前端小菜鸟
展开
-
angular中observers.length使用场景记录
场景模拟angular步骤条的时候,有一个场景是这样的,如果步骤条设置了监听事件,则悬浮鼠标样式为pointer,否则为default。部分代码import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';import { Step } from './steps.interfaces';@Component({ selector: 'yby-steps', templateUrl: './s原创 2022-04-13 14:48:15 · 759 阅读 · 0 评论 -
angular双向绑定理解
双向绑定原理双向绑定将属性绑定与事件绑定结合在一起。Angular 的双向绑定语法是方括号和圆括号的组合 [()]。[] 进行属性绑定,() 进行事件绑定。名称规则为 [输入名] + Change。属性绑定(@Input-输入) - 设置特定的元素属性。事件绑定(@Output-输出) - 侦听元素更改事件。所以表单双向绑定中有 ngModel 和 ngModelChange,也可以自定义双向绑定属性。ngModel与表单元素进行双向绑定import { Component,原创 2021-12-17 16:26:19 · 1057 阅读 · 0 评论 -
angular内容投影理解
单内容投影 - 利用ng-content来实现<!-- 组件 - app-content-single --><div> <h2>标题</h2> <!-- 投影内容显示位置 --> <ng-content></ng-content></div><!-- 使用 --><app-content-single> <div>this is content&l原创 2021-12-16 14:32:22 · 1232 阅读 · 0 评论 -
angular 之 ng-template、ng-container、ng-content区别及使用
ng-template定义一个模板-默认不渲染列表渲染例子-效果图html<div *ngFor="let person of persons;"> <div>姓名: {{person.name}}</div> <!-- 通过 ngTemplateOutlet 指令输出template的内容 context 可以给模板传递数据, $implicit 为默认的数据 --> <!-- ng-container 进行占位且不渲染具体的标签原创 2021-12-16 10:52:01 · 2310 阅读 · 0 评论 -
angular父子组件通信
用到的apiInput - 子组件中定义可接受的属性,可以用来父组件给子组件传递数据Output - 子组件中定义输出的属性,该属性需要是 EventEmitter 的事件类型,用来通知父组件做出相应的操作EventEmitter - 用在带有 @Output 指令的组件中,以同步或异步方式发出自定义事件,并通过订阅实例来为这些事件注册处理器。简单的例子列表渲染子组件,点击子组件通知父组件进行操作person.tsexport interface Person { name: string原创 2021-12-15 19:08:00 · 379 阅读 · 0 评论 -
angular自定义form表单元素-checkList
实际使用form的时候,最外层的form的某个表单元素可能是个组合的,这种情况如果是可多场景复用的,最好封装一个表单元素。本文以组合复选框为例来说明下自定义表单元素的过程实现效果展示效果html<form nz-form [formGroup]="form"> <nz-form-item nz-row> <nz-form-label style="width: 120px;" nzRequired>{{ label }}</nz-form-l原创 2021-12-14 14:38:39 · 1446 阅读 · 0 评论 -
angular12简单搭建项目的过程记录
ng全局安装最新发布版本安装npm install -g @angular/cli指定版本安装npm install -g @angular/cli@8.3.29查看当前版本ng --version注意:需要根据ng版本选择安装对应的node版本// Angular CLI: 12.2.2// Node: 14.16.0项目创建ng new admin-angular --skipTests=true --style=scss创建的项目中跳过了单元测试的创建原创 2021-09-28 12:01:44 · 1125 阅读 · 0 评论 -
angular中自定义webpack配置
用到 @angular-builders/custom-webpack 依赖安装 custom-webpackangular - 8.2.14@angular-builders/custom-webpack - 8.4.1npm i -D @angular-builders/custom-webpack@8.4.1 或者 yarn add @angular-builders/custom-webpack@8.4.1 --dev调整angular.json{ // ...省略配置 "p原创 2021-08-11 19:24:44 · 1525 阅读 · 0 评论 -
angular中使用echarts地图
在angular中使用echart的时候,只需要在对应的组件生命周期中调用echart的api就可以了echart的初始化在component的ngOnInit事件中进行echarts的初始化,配置option,然后echarts图表就生成了app-base-chart组件html<div #chart [ngClass]="'chart-box ' + (!option ? 'empty-chart' : '')"></div>scss// 基本的图表样式原创 2021-07-29 16:44:06 · 606 阅读 · 0 评论 -
angular中input、ngModelChange、valuesChange的监听情况
一个小小的输入框Input<div> testNameInput <input type="text" nz-input [(ngModel)]="testNameInput" (input)="testNameChange(testNameInput)"> testNameEventInput <input type="text" nz-input [(ngModel)]="testNameEventInput" (input)="testNameEvent原创 2021-07-23 10:11:57 · 2841 阅读 · 0 评论 -
本地调整angular8的devkit的逻辑以便于使用before方法进行api的mock
使用angular8进行项目开发,但是请求数据api的时候没找到官方给的使用webpack-devServer之before方法的api,现在找了个折中的办法,直接本地调整devkit的module配置,简单实现了。1.调整schema.json文件路径: node_modules/@angular-devkit/build-angular/src/dev-server/schema.json增加before,否则启动的时候会报错,不支持before选项{ "properties": {原创 2021-07-07 17:27:46 · 166 阅读 · 0 评论