- 博客(20)
- 资源 (27)
- 收藏
- 关注
RSS订阅原创 angular7获取当前激活的路由与监听路由
获取当前激活的路由名称，但是相对而言使用Router会比较好，因为Router能够实时的监听路由的变化，一旦路由发生了变化能马上监听到，在上面的代码中events事件订阅之后会返回对个不同的路由导航事件，这里需要根据自己的需要进行选择，关于路由导航事件，官网里都有介绍。另外ActivatedRoute也可以获取，相对比较麻烦，不推荐import { Router, NavigationEnd ...
2019-08-30 16:39:24
2657
原创 angular7中非父子组件间的通讯
方式一：通过service传递数据的组件：header.component.tsconstructor( private headerHomeData: HeaderHomeDataService) { }// 每次更改下拉框将数据传递给服务selectModeChange(e: any) { this.selectIsOpen = false; this...
2019-08-29 17:22:18
1305
原创 angular项目搭建注意事项
版本在新建项目的时候，一定要选择匹配的版本，包括脚手架版本和UI版本。项目环境nodenpmangular/cli ( npm install -g @angular/cli )项目搭建与运行ng new equipment-repairs-and-workorder-system 创建项目cd equipment-repairs-and-workorder-system 进...
2019-08-28 17:38:08
389
原创 angular7中使用ckplayer插件实现各大浏览器视频播放功能
使用原生的video属性，虽然主流浏览器都可以播放，但是在IE中会出现错误：（提示：视频类型不受支持或者文件路径无效）下载ckplayer.js文件可以在github或者我的下载资源中下载即可，目录结构如下：angular.json中引入"scripts": [ "node_modules/swiper/dist/js/swiper.min.js", "node_module...
2019-08-27 19:26:58
3038
原创 angular7项目使用nginx部署并使用H5(无#)history模式
前言前面的项目都是使用hash模式，即带#来访问的。不同模式（h5 history 和 hash #）两种模式之间的切换，在angular中做如下配置即可：app.module.tsimport { LocationStrategy, HashLocationStrategy, PathLocationStrategy } from '@angular/common';provider...
2019-08-27 11:09:59
1582
原创 angular7中渲染html数据，解决样式无效问题
在angular项目中，往页面上渲染html数据的时候，使用的是[innerHTML]来渲染，一般渲染富文本中的Html数据，比如新闻详情之类。但是发现，渲染之后，没有了行内样式。解决方法如下：在app下新建管道文件ng g pipe pipes/html在HtmlPipe管道中，写入如下代码：import { Pipe, PipeTransform } from '@angular/...
2019-08-23 08:55:05
3066
原创 angular中模拟页面刷新
有时候需要模拟用户刷新操作，只是为了效果，不做改变方法一document.documentElement.scrollTop = 0;方法二this.router.navigate(['/about/profile'], { queryParams: {refresh: new Date().getTime()}});...
2019-08-22 11:25:40
246
原创 angular7项目中使用页面锚点
在angular项目中使用页面锚点，原生的html锚点的时候会页面跳转或者找不到路由。可以使用以下方式解决：html<div class="circle_list"> <div class="circle wow zoomIn" (click)="goDistance1()">优质原料</div> <div class="circle...
2019-08-21 11:22:24
1668
原创 angular7中使用better-scroll实现滚动功能
地址https://www.npmjs.com/package/better-scroll安装npm install better-scroll --savenpm install better-scroll @types/better-scroll --save使用要求根据官方的文档可以看出，better-scroll对dom的结构是有要求的，最外层的wrapper那一层是需要固定...
2019-08-20 14:20:19
1354
原创 angular7中按需使用ng-zorro
在开发项目的时候，我们有时候不需要整个框架里面的模块，所以我们需要按需引入安装ng-zorronpm install ng-zorro-antd@7.3.3 --save安装指定版本，比如在angular7的脚手架搭建的项目中引入最新的ngzorro8会报错引入对应模块的样式文件在style.scss中导入@import '~ng-zorro-antd/style/index.min...
2019-08-20 09:40:47
1463
1
原创 angular7中wow.js的使用
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...
2019-08-19 08:56:07
526
原创 angular7中使用iframe来加载外部页面
在angular7中使用echarts的线性地图的时候，发现出来缩成了一团，暂未找到解决方案。但是在普通的html中直接引入并使用是没有问题的。因此，转换了思路，使用iframe来加载外部的html，因为在外部html中是正常的。将正常的html页面放到angular项目的assets下面，然后在angular组件中通过iframe动态引入。这样就可以正常显示了。数据请求可以单独放到页面中。静...
2019-08-16 10:18:09
8527
1
原创 angular7中使用swiper轮播图插件
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"...
2019-08-13 10:51:27
3222
原创 angular7中使用echarts
安装依赖建议使用cnpm 安装，直接使用npm可能会报错cnpm install echarts --savecnpm install ngx-echarts --save引入js文件angular.json"scripts": [ "node_modules/echarts/dist/echarts.js"],使用首先在需要的模块中引入microfactory...
2019-08-12 17:16:06
2015
原创 angular7监听滚动条滚动，路由跳转到顶部
app.component.tsimport { Component, OnInit } from '@angular/core';import { Router } from '@angular/router';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ...
2019-08-12 16:33:56
2738
原创 angular7项目中使用Iconfont字体图标库
iconfont官网https://www.iconfont.cn选择字体图标首先进入iconfont官网，然后使用github账号登录，搜索自己需要的图标，添加至购物车，然后添加之我的项目，点击下载即可。如下解压并复制iconfont开头的所有文件至angular项目assets/iconfont目录下在angular.json文件的styles下进行配置重启服务并使用&...
2019-08-12 11:41:46
3720
1
原创 angular7项目实战常见报错集锦
routerlink路由解决方法：在当前模块中引入路由模块import { RouterModule} from '@angular/router';imports: [ CommonModule, RouterModule],
2019-08-09 16:25:22
443
原创 Angular Universal 服务端渲染
使用angular创建的项目都是单页应用，即SPA应用。所以一般用来开发大数据量、大交互的后台系统。但是有时候需要考虑到seo的问题，就不得不用到服务端渲染技术。三大框架（react、angular、vue）都具有服务端渲染的功能。官方文档（https://angular.cn/guide/universal）创建项目和正常的创建angular项目一致，使用ng new projectNa...
2019-08-09 09:39:10
1111
原创 angular项目常用工具总结
服务端渲染https://angular.cn/guide/universalhttps://www.cnblogs.com/sgciviolence/p/6961287.htmlhttps://www.jianshu.com/p/40be228a5ec6插件富文本编辑器 http://www.html580.com/12414...
2019-08-08 14:58:31
562
原创 组件化项目开发管理系统布局思路
实现全屏，不同组件页面的布局头部组件是公共组件，只需要引入一次，而下面的内容就是不同的大组件，显示在router-outlet中。<div class="page"> <div class="header"> <app-header></app-header> </div> <div c...
2019-08-01 17:32:27
437
webpack+typescript环境配置.zip
2020-04-23
gnvm地址.zip
2020-03-18
黑马程序员西安校区前端学科面试宝典-2019.pdf
2020-01-16
ajv.min.js
2019-12-22
ckplayer.zip
2019-08-27
nginx-1.12.2.zip
2019-08-27
react最全项目实战
2019-01-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人