yw00yw的博客

在开发项目的时候，我们有时候不需要整个框架里面的模块，所以我们需要按需引入安装ng-zorronpm install ng-zorro-antd@7.3.3 --save安装指定版本，比如在angular7的脚手架搭建的项目中引入最新的ngzorro8会报错引入对应模块的样式文件在style.scss中导入@import '~ng-zorro-antd/style/index.min...

routerlink路由解决方法：在当前模块中引入路由模块import { RouterModule} from '@angular/router';imports: [ CommonModule, RouterModule],

ngx-wow地址https://tinesoft.github.io/ngx-wow/doc/index.htmlhttps://www.npmjs.com/package/ngx-wow首先安装依赖项， wow.jsnpm install --save wowjs在angular.json中引入animate.css和wow.js"styles": [ "src/sty...

使用angular创建的项目都是单页应用，即SPA应用。所以一般用来开发大数据量、大交互的后台系统。但是有时候需要考虑到seo的问题，就不得不用到服务端渲染技术。三大框架（react、angular、vue）都具有服务端渲染的功能。官方文档（https://angular.cn/guide/universal）创建项目和正常的创建angular项目一致，使用ng new projectNa...

服务端渲染https://angular.cn/guide/universalhttps://www.cnblogs.com/sgciviolence/p/6961287.htmlhttps://www.jianshu.com/p/40be228a5ec6插件富文本编辑器 http://www.html580.com/12414...

文件上传在使用input type="file"的时候，上传图片的时候，删除之后第一次再不能上传相同的图片bug。首先删除之后将input的类型设置的text// 删除图片deleteImg(index: any) { this.formData.fileList.splice(index, 1); this.fileUploadImg.nativeElement.se...

在路由传值中，除了从开始路由到目标路由传值之外，还可以从目标路由传值到开始路由。意思就是从开始路由传值到目标路由成功之后，执行完操作之后又从目标路由返回到了开始路由并携带参数。一、起始路由向目标路由传递参数获取路由对象import { Router, ActivatedRoute, NavigationExtras} from '@angular/router';注入cons...

在angular项目中，不同的打包方式发布之后加载的速度不同。所以在打包的时候一定要使用正确的打包姿势。总体对比命令效果体积相同项目不同打包方式代码体积ng build相当于开发环境体积最大23.6Mng build --prodangular预编译体积最小3.71Mng build --prod --aotangular预编译体积最小3....

使用响应式表单在开发的过程中，经常会用到。使用响应式表单的不仅能够提高开发效率，并且还能有效减少冗余的代码，在表单校验的时候也更方面，并且结合ngzorro进行表单校验效果更完美。...

对响应式表单设置默认值this.validateForm.get('isPay').setValue('0');

在angular中实现文件下载功能，暂不支持pdf格式，因为pdf会直接预览H5的下载方式：<!-- <td class="underline"><a [href]="item.URL" [download]="item.DocName">{{item.DocName}}</a></td> -->// 文件下载 down...

在angular中使用ngx-quill在angular中使用ngx-quill富文本编辑器的入坑指南。如果在ng2<=>ng5版本中，根据网上的教程是没有问题的。如果在>=ng5版本，目前项目在ng7项目中使用ngx-quill出现错误。在ng6及以上的版本中使用ngx-quill，会出现如上错误，不能够解决quill,那是因为在ng6以上的版本中使用ngx-quil...

一、ng-contentng-content是内容映射指令(也叫内容嵌入)，相当于vue中的slot内容分发，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件，很好地扩充组件的功能，方便代码的复用。使用方法：https://blog.youkuaiyun.com/yw00yw/article/details/90175624ng-content相当于一个占位符(留了个位置)，类似于路由出口ro...

在实际的使用中，我们会用到内容投影，即插槽的概念。在vue中可以通过slot来标记插槽，从而达到从父组件向子组件传递显示内容。在angular中，同样可以使用ng-content来实现与vue中的slot同样的功能和效果。简单投影（单个插槽| 默认插槽| 匿名插槽）父组件anchor.component.html：<app-slot> <h2>我是嵌入的外部...

地址https://www.npmjs.com/package/better-scroll安装npm install better-scroll --savenpm install better-scroll @types/better-scroll --save使用要求根据官方的文档可以看出，better-scroll对dom的结构是有要求的，最外层的wrapper那一层是需要固定...

iconfont官网https://www.iconfont.cn选择字体图标首先进入iconfont官网，然后使用github账号登录，搜索自己需要的图标，添加至购物车，然后添加之我的项目，点击下载即可。如下解压并复制iconfont开头的所有文件至angular项目assets/iconfont目录下在angular.json文件的styles下进行配置重启服务并使用&...

使用httpClient读取本地JSON文件import { HttpClient } from '@angular/common/http';public HttpClient: HttpClient// 获取本地数据 getLocalhostData() { this.HttpClient.get('/assets/json/areaTree.json').subscribe(...

情况概述在angular7中请求本地的JSON文件，本地请求没问题，但是打包发布404项目部署在IIS服务器上，如果打包之后，访问静态资源目录assets中的文件，发现.json文件访问不到，解决方法如下：设置IIS服务器的MIME类型点击MIME进行设置，默认没有.json格式，可以在右上角进行添加设置完成后重启服务，即可生效设置MIME类型，同样在视频网站，如果电脑安装了...

方式一：html<div nz-col nzSpan="24"> <nz-form-item> <nz-form-label style="margin-left: -4px;" [nzSpan]="3" nzRequired>授权书</nz-form-label> <nz-form-contro...

获取当前激活的路由名称，但是相对而言使用Router会比较好，因为Router能够实时的监听路由的变化，一旦路由发生了变化能马上监听到，在上面的代码中events事件订阅之后会返回对个不同的路由导航事件，这里需要根据自己的需要进行选择，关于路由导航事件，官网里都有介绍。另外ActivatedRoute也可以获取，相对比较麻烦，不推荐import { Router, NavigationEnd ...

方式一：通过service传递数据的组件：header.component.tsconstructor( private headerHomeData: HeaderHomeDataService) { }// 每次更改下拉框将数据传递给服务selectModeChange(e: any) { this.selectIsOpen = false; this...

版本在新建项目的时候，一定要选择匹配的版本，包括脚手架版本和UI版本。项目环境nodenpmangular/cli ( npm install -g @angular/cli )项目搭建与运行ng new equipment-repairs-and-workorder-system 创建项目cd equipment-repairs-and-workorder-system 进...

使用原生的video属性，虽然主流浏览器都可以播放，但是在IE中会出现错误：（提示：视频类型不受支持或者文件路径无效）下载ckplayer.js文件可以在github或者我的下载资源中下载即可，目录结构如下：angular.json中引入"scripts": [ "node_modules/swiper/dist/js/swiper.min.js", "node_module...

前言前面的项目都是使用hash模式，即带#来访问的。不同模式（h5 history 和 hash #）两种模式之间的切换，在angular中做如下配置即可：app.module.tsimport { LocationStrategy, HashLocationStrategy, PathLocationStrategy } from '@angular/common';provider...

有时候需要模拟用户刷新操作，只是为了效果，不做改变方法一document.documentElement.scrollTop = 0;方法二this.router.navigate(['/about/profile'], { queryParams: {refresh: new Date().getTime()}});...

swiper中文官网https://www.swiper.com.cn/安装 插件npm / cpmnpm install swiper --save || yarn add swiper --savenpm install @types/swiper --save || yarn add @types/swiper --save配置angular.json"styles"...

安装依赖建议使用cnpm 安装，直接使用npm可能会报错cnpm install echarts --savecnpm install ngx-echarts --save引入js文件angular.json"scripts": [ "node_modules/echarts/dist/echarts.js"],使用首先在需要的模块中引入microfactory...

在angular7中使用echarts的线性地图的时候，发现出来缩成了一团，暂未找到解决方案。但是在普通的html中直接引入并使用是没有问题的。因此，转换了思路，使用iframe来加载外部的html，因为在外部html中是正常的。将正常的html页面放到angular项目的assets下面，然后在angular组件中通过iframe动态引入。这样就可以正常显示了。数据请求可以单独放到页面中。静...

app.component.tsimport { Component, OnInit } from '@angular/core';import { Router } from '@angular/router';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ...

在angular项目中使用页面锚点，原生的html锚点的时候会页面跳转或者找不到路由。可以使用以下方式解决：html<div class="circle_list"> <div class="circle wow zoomIn" (click)="goDistance1()">优质原料</div> <div class="circle...

file-upload.service.tsimport { Injectable } from '@angular/core';import { HttpService } from './http.service';import { ApiService } from './api.service';@Injectable({ providedIn: 'root'})ex...

FileReader简介FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。input:file<input type="file" id="inputBox">i...

在使用angular的模块懒加载的时候，一级路由是没问题的，都可以访问，但是使用二级路由，即子路由的时候报错或者没反应。这个坑可真是大而深呀。报错如下：研究了很久，浪费了很多时间。刚开始确实想着一级模块路由和子模块路由配置应该是一样的。就将子模块路由的配置和一级路由模块懒加载的配置一样。但是事与愿违。刚开始第一个子模块路由懒加载出来，但是后面的又不出来了。折腾到了大晚上，还是搞不定。重新...

对于任何一个应用来说，安全都是必不可少的操作。一般安全验证的比较流行的方式是：token验证后台生成一个token，第一次登陆成功之后，将token从后台携带回来，然后前端每次的请求都要将token带到后台。后台验证有没有token且是否相同，并且设置token的有效期。编写拦截器interceptor.service.tsimport { Injectable } from '@ang...

在前后端分离开发的过程中，跨域问题是不可避免的。在angular中如何解决跨域问题呢？和在vue中类似，同样适用代理。1. 在angular项目根目录下创建proxy.config.json文件：{ "/api": { "target": "http://192.168.1.114:8041/", // 代理的地址 "secure": false, ...

路由守卫的作用，在做登录等权限验证的时候，需要用到路由守卫，辅助进行验证。比如：使用angular做的是单页应用，如果不用任何权限控制的话，就算使用了用户登录功能，假如我们需求是当用户登录成功之后才能看其他的页面。但是如果不用任何权限控制，我们用户就算登录失败，可以直接在url地址中输入需要跳转页面路由，则就会看到不许要被看到的内容。所以：上述情况下，我们需要通过路由守卫来达到我们的目的。通...

login.component.tsimport { HttpService } from 'src/app/services/http.service';constructor(private http: HttpService) {}// ajax数据测试 get doGet() { const obj = { _userName: '...

Angular中修改第三方组件的样式::ng-deep img width 100% height 100% border 1px solid red

在新版本的angular中使用新的ng zorro，按照官方文档一步一步来，没有报错，但是也没有反应。试了一下官方的两种方式，第一种方式报错，第二种方式没有反应。官方的第一种方式：1. 安装脚手架工具 `npm install -g @angular/cli`2. 创建一个项目 `ng new PROJECT-NAME`3. 初始化配置 `ng add ng-zorro-antd`4....

依赖插件jQueryniceScroll安装cnpm i jquery --savecnpm install jquery.nicescroll引入angular.json"scripts": [ "node_modules/_jquery@3.3.1@jquery/dist/jquery.min.js", "node_modules/_jquery.nicescrol...