![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Angular
文章平均质量分 56
lvxinaidou
这个作者很懒,什么都没留下…
展开
-
Angular创建自己的库发布到npm上使用
注意,一定要修改paths,否则模块引入会报错的。具体代码(有第三方组件一定要应用module)可以修改html的前缀。使用自己定义的html。原创 2023-04-05 21:02:58 · 845 阅读 · 1 评论 -
Angular 7 升级到Angular 12
angular升级原创 2022-07-27 08:13:32 · 644 阅读 · 0 评论 -
Angular 14微前端项目构建
angular 14微前端项目构建原创 2022-07-19 17:15:28 · 1286 阅读 · 0 评论 -
Angular 项目的搭建步骤
快速搭建angular项目原创 2022-07-08 12:57:11 · 1941 阅读 · 2 评论 -
取出中括号里面的字符串
原创 2022-02-09 19:34:47 · 540 阅读 · 0 评论 -
纯前端下载表格多sheet
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body> <script src="js/xlsx.min.js"></script> <script src="js/xlsx.full.min.js"></script> <原创 2022-01-27 11:27:44 · 1095 阅读 · 0 评论 -
sheetName的改变
npm i xlsxnpm i xlsxpackage.json 里面多个 ,"xlsx": "^0.17.2"引用import { saveAs } from 'file-saver';import { utils, write } from 'xlsx';使用 sheetName这个就是要改的名字 exportExcel() { const worksheet = utils.json_to_sheet(this.getExcelData());.原创 2022-01-27 10:29:34 · 467 阅读 · 0 评论 -
循环多个散点图
tree.json[ { "title": "Ws基准版本", "children": [ { "title": "EMBMWA-C1", "children": [ { "title": "RA1", "children": [ { "title": "Rot", "isLeaf": true }, { "ti原创 2022-01-26 15:20:06 · 641 阅读 · 0 评论 -
Echarts-显示24小时得数据
<div class="test"></div>ngOnInit() {let mytestcharts = echarts.init(document.querySelector('.test') as any); let data1 = [ {name:'2022/12/18 6:38:08', value:['2022/12/18 6:38:08', 80]}, {name:'2022/12/18 16:18:18', value:['20原创 2022-01-25 11:17:28 · 1071 阅读 · 0 评论 -
echarts-tree-动态加载
html<section class="welcome-page"> <div> <nz-range-picker [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-range-picker> </div> <span class="tree"> <nz-tree [nzData]="nodes" nzCheckab原创 2022-01-23 16:18:08 · 902 阅读 · 0 评论 -
学习 RxJS 操作符
学习 RxJS 操作符( Learn RxJS中文版)原创 2022-01-05 14:37:39 · 893 阅读 · 0 评论 -
Angular指令
1. 上面是指令指令是为 Angular 应用程序中的元素添加额外行为的类。使用 Angular 的内置指令,你可以管理表单、列表、样式以及要让用户看到的任何内容。2.指令分类Angular 指令的不同类型如下:组件 —— 带有模板的指令。这种指令类型是最常见的指令类型。属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令。结构型指令 —— 通过添加和删除 DOM 元素来更改 DOM 布局的指令。内置属性指令: ngClass, ngStyle,ngModel内置结构指令: ng原创 2022-01-04 15:12:39 · 888 阅读 · 0 评论 -
Angular指令-结构性指令(*ngTemplateOutlet)使用
1.常规写法//默认值$implicit, 如果let-定义的变量,没有值,就会读取默认的$implicit的值 tryObj = { $implicit: 'test default', value:'test', key: '1' }<ng-container [ngTemplateOutlet]="try" [ngTemplateOutletContext]="tryObj"></ng-container>// let-trylet 取得原创 2022-01-04 13:19:02 · 527 阅读 · 0 评论 -
table-rowspan
import { Component, OnInit } from '@angular/core';import { NzMessageService } from 'ng-zorro-antd/message';import { WelcomeService } from './services/welcome.service';import * as _ from 'lodash';import { LoadingService } from 'src/app/core/loading/l原创 2022-01-03 21:38:10 · 1022 阅读 · 0 评论 -
typescript-装饰器
1.定义一个装饰器,装饰器下面的函数会自动触发app.component.html<button nz-button nzType="primary" (click)="method(obj)">decorator</button>app.component.tsimport { Component, OnInit,} from '@angular/core';import { Color } from './core/learn-decorator';@Compone原创 2021-12-30 15:17:26 · 594 阅读 · 0 评论 -
HTTP请求
设置后端地址已经静态资源地址export const environment = { production: false, BASE_URL: 'http://10.61.177.108:8080', ASSETS_URL: '../assets/jsons'};设置请求的接口地址export class WelcomeConstant { public static REG_FINGING_DETAILS = 'reg-fing-details.json';}.原创 2021-12-19 10:25:52 · 143 阅读 · 0 评论 -
Angular 8 组件的生命周期-AfterContent
Angular 8 组件的生命周期-AfterContent1.响应被投影内容的变更2.学习地址1.响应被投影内容的变更内容投影是从组件外部导入 HTML 内容,并把它插入在组件模板中指定位置上的一种途径。 可以在目标中通过查找下列结构来认出内容投影。这个 AfterContent 例子探索了 AfterContentInit() 和 AfterContentChecked() 钩子。Angular 会在把外部内容投影进该组件时调用它们。使用 AfterContent 钩子AfterConten原创 2021-12-14 21:18:51 · 718 阅读 · 0 评论 -
Angular 8 组件的生命周期-AfterView
Angular 8 组件的生命周期-AfterView1.响应视图的变更2.学习地址:1.响应视图的变更当 Angular 在变更检测期间遍历视图树时,需要确保子组件中的某个变更不会尝试更改其父组件中的属性。因为单向数据流的工作原理就是这样的,这样的更改将无法正常渲染。如果你需要做一个与预期数据流反方向的修改,就必须触发一个新的变更检测周期,以允许渲染这种变更。这些例子说明了如何安全地做出这些改变。AfterView 例子展示了 AfterViewInit() 和 AfterViewChecked原创 2021-12-14 20:52:57 · 1026 阅读 · 0 评论 -
Angular 8 组件的生命周期-ngOnChanges
Angular 8 组件的生命周期-ngOnChanges1. 使用变更检测钩子2.学习地址:1. 使用变更检测钩子一旦检测到该组件或指令的输入属性发生了变化,Angular 就会调用它的 ngOnChanges() 方法。 这个 onChanges 范例通过监控 OnChanges() 钩子演示了这一点。ngOnChanges() 方法获取了一个对象,它把每个发生变化的属性名都映射到了一个SimpleChange对象, 该对象中有属性的当前值和前一个值。这个钩子会在这些发生了变化的属性上进行迭代,原创 2021-12-13 21:33:29 · 3367 阅读 · 0 评论 -
Angular 8 组件的生命周期-指令的生命周期
Angular指令的生命周期1. 使用指令来监视 DOM2. 同时使用组件和指令的钩子3. 学习地址1. 使用指令来监视 DOM可以深入了解你无法直接修改的 DOM 对象。你无法触及内置 的实现,也无法修改第三方组件,但是可以用指令来监视这些元素。你可以把这个侦探指令写到任何内置元素或组件元素上,以观察它何时被初始化和销毁。app.module.ts表单要加入FormsModule, 引入自定义指令SpyDirectiveimport { NgModule } from '@angular/c原创 2021-12-12 20:06:02 · 442 阅读 · 0 评论 -
Angular 8 组件的生命周期
组件的生命周期1. 什么是生命周期2. 生命周期钩子分类2.1 指令与组件共有的钩子2.2组件特有的钩子3. 生命周期的顺序3.1 实例3.2 运行效果:4.学习地址1. 什么是生命周期生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些 生命周期钩子方法。每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的,比如OnInit接口的钩子方法叫做ngOnIn原创 2021-12-03 19:40:58 · 566 阅读 · 0 评论 -
angular中动态创建组件
1.文件目录2.核心代码app.component.html<h1 #msgContainer>我是Container</h1><button (click)="createComponent()">创建组件</button><!-- <h1>我是Container 2</h1><ng-template #msgContainer></ng-template><button (cli原创 2021-09-01 14:02:45 · 604 阅读 · 0 评论 -
ng-content、ng-template、ng-container使用及区别
ng-template、ng-content、ng-containerangular之ng-container 、ng-template、ng-content的使用原创 2020-11-19 12:55:00 · 2049 阅读 · 0 评论 -
Angular RouteReuseStrategy 缓存组件及路由复用
Angular RouteReuseStrategy 缓存组件一、路由基础使用1.1 创建项目及组件和服务1.2 核心代码1.3 运行结果二、路由缓存2.1 路由复用策略的理解2.2 RouteReuseStrategy一些概念2.3 路由复用策略方法调用顺序2.3.1 shouldReuseRoute2.3.2 shouldAttach2.3.3 retrieve2.3.4 shouldDetach2.3.5 store2.3.6 总结2.4 实例2.5 运行结果三、学习地址一、路由基础使用1.1原创 2020-10-25 18:57:47 · 2425 阅读 · 2 评论 -
使用AngularCLI快速开发一个Library
简书快速开发一个Library原创 2020-10-08 20:40:57 · 795 阅读 · 0 评论 -
Angular8 *NgIf,*NgFor,*NgSwitch,NgStyle,NgClass用法
Angular8内置指令使用一、ngFor二、ngIf三、ngSwitch四、 ngStyle五、ngClass一、ngFor二、ngIf三、ngSwitch四、 ngStyle五、ngClass原创 2020-06-11 18:08:46 · 1809 阅读 · 0 评论 -
TypeScript前端数据结构管理
TypeScript前端数据结构管理一、const1.1定义1.2使用二、class2.1定义2.2使用三、 enum3.1定义3.2使用四、Interface4.1定义4.2使用五、效果说明:以一个学生为对象例子。一、const1.1定义单个常量export const STUDENT_NAME = 'lvxin';多个静态值(常量)export class StudentConstant { public static id = 1; public static deta原创 2020-06-11 17:02:24 · 291 阅读 · 0 评论 -
Angular8 路由使用Router
这里写目录标题一级目录二级目录三级目录一级目录二级目录三级目录原创 2020-06-10 11:51:18 · 994 阅读 · 0 评论 -
Angular8管道使用 Pipe
这里写目录标题一级目录二级目录三级目录一级目录二级目录三级目录原创 2020-06-10 09:46:16 · 1904 阅读 · 0 评论 -
Angular8 拦截器 HttpInterceptor使用
这里写目录标题一级目录二级目录三级目录学习地址:一级目录二级目录三级目录学习地址:拦截器补全请求地址操作HttpResponse返回的status状态码拦截器给请求设置token拦截器官方文档原创 2020-06-04 14:37:42 · 2603 阅读 · 0 评论 -
Angular8 路由捍卫使用
这里写目录标题一级目录二级目录三级目录一级目录二级目录三级目录原创 2020-06-04 14:06:24 · 579 阅读 · 0 评论 -
angular8 路由策略 LocationStrategy
angular8 路由策略 LocationStrategy一、什么是路由二、 前端路由2.1、hash实现2.2、HTML5实现2.3、Aangular8路由策略实现三、优点四、总结五、学习地址一、什么是路由假如我们有一台提供 Web 服务的服务器的网络地址是:127.0.0.1(localhost),而该 Web 服务又提供了三个可供用户访问的页面,其页面 URI 分别是:http://127.0.0.1/login/loginhttp://127.0.0.1/plan/plan-homeht原创 2020-06-04 13:24:41 · 6270 阅读 · 0 评论 -
Angular8 主题色切换(封装成Directive)
Angular8 主题色切换一、概述二、前景知识2.1、SCSS使用(var --)2.2、设置css属性dom.setProperty('background-color':'yellow')2.3、Angular8 Directive使用2.4、subScription,ElementRef,localStroage三、文件目录四、实例展示3.1、app.component3.2、nav.component3.3、core/themes/3.4、切换主题效果图五、项目地址六、学习地址一、概述切换主题原创 2020-06-02 18:52:44 · 897 阅读 · 0 评论 -
Angular 8 使用 @ViewChild、@ViewChildren 访问 DOM、组件、指令
Angular 8 使用 @ViewChild、@ViewChildren 访问 DOM、组件、指令概述一、选择器1.1、任何带有 @Component 或 @Directive 装饰器的类1.2、字符串形式的模板引用变量1.3、组件树中任何当前组件的子组件所定义的提供商(provider)1.4、任何通过字符串令牌定义的提供商1.5、TemplateRef二、适用场景2.1、DOM2.1.1、获取DOM里面宿主视图2.1.2、获取DOM里面嵌入视图2.2、组件2.3、指令概述用于配置一个视图查询。原创 2020-06-02 11:43:31 · 1782 阅读 · 1 评论 -
Angular 8 自定义指令@Directive使用
Angular 8 自定义指令@Directive使用一、概述1.1、结构型指令1.2、属性型指令1.3、组件(模板指令)二、实例2.1、创建自定义指令2.2、声明指令2.3、模板文件(组件)引用指令2.4、运行效果三、扩展3.1、host3.2、其他学习参考一、概述所谓指令就是用于改变一个DOM元素的外观或行为,Angular8为我们封装了很多的内置指令,项目中也无时无刻不在使用指令,Angular8中有三类指令1.1、结构型指令通过添加和移除 DOM 元素改变 DOM 布局的指令,例如:Ngif原创 2020-05-26 19:06:11 · 3052 阅读 · 0 评论 -
Angular8 Subject 同级组件通讯
Angular8 Subject 同级组件通讯1.文件结构2.数据结构models/student-info.model.tsexport class StudentInfo { public name: string; public chinese: string; public maths: string; public english: string...原创 2020-05-06 13:21:25 · 813 阅读 · 0 评论 -
通过ip地址访问同一局域网下已经启动的angular项目
通过ip地址访问同一局域网下已经启动的angular项目1.cmd->ipconfig 查看本机ip2.运行项目ng serve ->localhost:4200.ng serve --host 本机地址ng serve --host 10.61.177.108 -> http://10.61.177.108:4200...原创 2020-05-06 10:38:13 · 525 阅读 · 0 评论 -
Angular8 依赖注入InjectionToken使用
Angular8 依赖注入InjectionToken使用1.数据结构(models文件下)models/column-details.model.tsexport interface Column { columnId:string; columnName: string; width: number}或者export class Column { ...原创 2020-05-06 10:19:36 · 1822 阅读 · 0 评论 -
Angular封装组件
Angular封装组件Angular的页面结构就是多个组件的结合,由父组嵌套子组件,组件之前互相跳转形成的一个框架整体。封装一个组件相当于做一个子组件,这样父组件就可以通过调用这个子组件的方式使用这个子组件的功能及其样式。现将组件分为两种:(1)功能组件(占有页面少的一个功能整体):如搜索框、下拉框;(2)页面组件(占有比较大的页面篇幅):如时间轴、新增页面、编辑页面。做好一个组件,在...转载 2020-04-02 10:54:40 · 1755 阅读 · 0 评论 -
Angular中ngx-echarts的使用
1.安装npm install echarts --savenpm install ngx-echarts --save2.引入模块2-1.angular.json中引入echarts.js文件"scripts": [ "node_modules/echarts/dist/echarts.js" ]2-2.当前组件所在的根模块导入NgxEchartsModule模块...原创 2020-02-10 10:45:03 · 2881 阅读 · 0 评论