angular6、ionic4、typescript、rx
文章平均质量分 63
学习angular6.x 技术体系
胖鹅68
熟悉h5,jquery,css2/3,angular,ionic,springMVC,hibernate,spring,struts,mybatis,mysql,oracle,linux,android等技术
了解openfire开源系统,熟悉openfire的IM功能
展开
-
vscode搭建调试typescript文件环境
文章目录参考问题描述创建typescript开发环境步骤参考TypeScript 入门教程问题描述最近想学习typescript的语法,不想引入与ts无关的东西,因此写一篇笔记记录搭建ts环境的过程创建typescript开发环境步骤创建一个typescriptStudy文件夹进入typescriptStudy文件夹,执行 npm init -y 快速创建package.json执行 tsc --init 快速创建 tsconfig.js 配置文件{ "compil原创 2020-07-16 10:55:35 · 665 阅读 · 0 评论 -
ngZorro错误Missing locale data for the locale zh-cn
文章目录问题原因在app.module.ts中的完整例子(包含ng-zorro其他模块的引入)问题原因nz-date-picker 的部分 locale 来自于 Angular 自身的国际化支持,需要在 main.ts文件中 引入相应的 Angular 语言包。import { registerLocaleData } from '@angular/common';import zh from '@angular/common/locales/zh';registerLocaleData(原创 2020-06-20 15:42:52 · 2635 阅读 · 1 评论 -
angular6 安装百度地图
文章目录文章参考开发步骤如何去掉百度的logo?文章参考百度地图 Cannot read property ‘gc’ of undefinedAngular引入百度地图js,显示不出来开发步骤申请百度地图密钥在Angular项目中引入百度地图API文件,在index.html中引入<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=您的密钥"><原创 2020-06-17 11:25:35 · 478 阅读 · 0 评论 -
angular6 安装百度echarts
文章目录文章参考安装依赖库第一种:ngx-echarts 模块创建报表app.module.ts 注册组件中使用第二种:引入echarts.min.js库(与标准HTML使用eharts方式一致)在angular.json文件中配置,引入 echarts.min.js组件中使用文章参考ngx-echarts npmngx-echarts 例子安装依赖库npm install echarts -Snpm install ngx-echarts -S第一种:ngx-echarts 模块创建报原创 2020-06-17 11:13:37 · 632 阅读 · 0 评论 -
angular6 环境搭建
文章目录问题描述安装步骤问题描述昨天重装了电脑,发现突然自己不知道怎么安装angular环境了,虽然很简单,但是还是总结一下,方便以后复习安装步骤安装 nodejs安装 typescript 编译器npm install -g typescript安装 angular cli 脚手架npm install -g @angular/cli创建工程ng new 项目名称启动工程(进入创建的工程中)ng serve...原创 2020-06-16 11:00:05 · 461 阅读 · 0 评论 -
Angular6的ngFor遍历JSON对象
文章目录文章参考案例文章参考Angular6的ngFor遍历对象数组案例定义一个JSON对象,利用Object.keys方法import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-ngfor-object', templateUrl: './ngfor-object.component.html', styleUrls: ['./ngfor-object.component.原创 2020-05-22 12:23:33 · 3168 阅读 · 0 评论 -
angular6 在service中封装http请求,返回Observable 对象
文章目录文章参考问题描述案例文章参考从Angular6开始入门RxJS6Rxjs 6学习问题描述想利用后台的MVC的思想,将向后台请求数据的方法全部放到service中,便于代码的管理发现自己不了解http.post()返回的数据类型,根据Vscode工具提示是ObservableObservable里面用到了泛型,不知道怎么使用,因此做个笔记,方便后面自己学习案例定义service的一个方法,返回的是 Observable<{}> 对象import { Inje原创 2020-05-19 15:07:28 · 1636 阅读 · 0 评论 -
typescript setInterval()函数数据类型NodeJS.Timeout
文章目录文章参考问题描述解决办法文章参考在Ionic 2中使用NodeJS.Timer时找不到命名空间NodeJS问题描述在typescript中想使用一个定时器,记录考试的时间,在离开页面的时候需要把定时器关闭掉,防止内存溢出但是不知道setInterval()返回函数的类型,使用Vscode 的提示信息,返回的是 NodeJS.Timeout,但是编译器还是提示报错解决办法定义对象数据类型是 NodeJS.Timeoutimport { Component, OnInit }原创 2020-05-19 13:47:05 · 12058 阅读 · 0 评论 -
angular6 监听组件属性变化
文章目录文章参考问题描述解决办法——ngOnChanges官方例子自己写的简单例子文章参考官方文档解释监听数据变化angular4,angular6 父组件异步获取数据传值子组件 undefined 问题问题描述异步获取数据,然后将数据传递给子组件,此时子组件已经初始化完成,但是子组件如何获取新的数据,然后重新渲染解决办法——ngOnChanges父组件在初始化或者在修改子组件的输入属性时被调用。引用类型改变,不触发,初始化输入属性官方例子import { Component,原创 2020-05-09 12:45:11 · 8516 阅读 · 0 评论 -
angular6 设置路径别名
文章目录文章参考问题描述修改 tsconfig.json 文件使用案例文章参考Angular设置别名alias的方法问题描述由于angular一个组件就是一个文件夹,导致文件目录层级很深,追寻文件的相对路径不是很方便想把定义文件类型,专门放到一个文件夹下,方便统一管理,因此引用的路径就是固定的,使用绝对路径比较方便修改 tsconfig.json 文件compilerOptions.baseUrl 改为 src 目录添加compilerOptions.paths 节点"path原创 2020-05-09 12:42:44 · 1354 阅读 · 0 评论 -
angular6 开发环境允许局域网IP访问
文章目录问题描述原因解决办法——修改package.json问题描述为了使用手机查看开发界面的效果,发现根据IP无法访问原因这个是因为 webpack-dev-middleware 默认不允许IP远程访问解决办法——修改package.json"scripts": { "start": "ng serve --host 0.0.0.0",},...原创 2020-05-08 12:55:16 · 1215 阅读 · 0 评论 -
angular6 环境变量
文章目录参考问题描述angular.json 配置添加不同环境变量配置文件package.json中修改启动命令开发环境发布环境在ts文件中使用不能debugger调试了参考Angular 8 environments 配置问题描述由于Vue有根据环境变量.env文件配置,来区分production和develop,根据这个环境变量,就可以判断是否需要使用mock数据或者后台服务地址,...原创 2020-05-08 12:50:53 · 1026 阅读 · 0 评论 -
angular6 使用mockjs模拟后台数据
文章目录问题描述环境安装定义mock数据文件main.ts 中引入 mockjs模拟的数据测试问题描述由于后台没有开发完成,因此需要前端根据模拟数据先做界面开发,为了方便http请求异步联调,想使用mockjs的请求功能,方便开发环境安装cnpm install -S mockjs定义mock数据文件import Mock from "mockjs";//拦截请求,返回假数据M...原创 2020-05-08 12:29:52 · 2952 阅读 · 1 评论 -
angular6 解析HTML字符串
文章目录文章参考问题描述解决办法 —— 管道(DomSanitizer)创建管道使用文章参考Angular—显示html文本问题描述使用插值表达式{{}}直接显示html内容,则html的标签不会被解析<div class="content" [innerHTML]="article.content"></div>,虽然使用innerHTML属性可以正常显示...原创 2020-05-08 11:56:57 · 1413 阅读 · 0 评论 -
angular6工程有多个module, ng g component创建组件出错
文章目录文章参考问题描述原因分析解决办法文章参考ng c g新建组件出现More than one module matches. Use skip-import option to skip importing the component int问题描述在引入 Angular Material UI 组件的时候,创建了一个module引入了所有的UI组件,然后再使用 ng g com...原创 2020-05-08 11:46:09 · 2129 阅读 · 0 评论 -
angular6 material9.X安装
文章目录文章参考安装将Material的模块全部引用问题描述解决办法使用Material组件文章参考https://pdf-lib.org/Home/Details/11816https://www.jianshu.com/p/9e81ad972371安装cnpm install -S @angular/material @angular/cdk @angular/animation...原创 2020-05-08 10:03:11 · 4219 阅读 · 0 评论 -
angular6.x 字符串解析为HTML代码
参考Angular—显示html文本问题描述使用插值表达式{{}}直接显示html内容,则html的标签不会被解析解决办法innerHTML<div class="content" [innerHTML]="article.content"></div>问题虽然使用innerHTML属性可以正常显示html内容但是出于安全考虑,angular的净化...原创 2020-05-03 23:15:15 · 1030 阅读 · 0 评论 -
angular6 路由router搭建配置
文章参考路由与导航(下载官方案例,对比齐代码)[https://angular.cn/generated/zips/router/router.zip]配置路由模块import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';...原创 2019-07-15 00:08:30 · 1682 阅读 · 0 评论 -
angular6 基本语法——属性、变量、*ngIf、*ngFor
自定义设置属性值<div [id]='myName'> {{myName}}</div><div id={{myName}}> {{myName}}</div><div bind-id='myName'> {{myName}}</div><div [attr.myname]='myName'>...原创 2019-07-26 13:44:56 · 2124 阅读 · 0 评论 -
angular6 加载静态资源
文章目录文章参考操作步骤assets文件夹说明文章参考https://angular.cn/guide/file-structure操作步骤静态资源添加在 src/assets目录下面代码中引入assets中的文件,要是用相对路径<!-- 引入静态资源 --><img src=' ./assets/images/test_img.jpg' />as...原创 2019-09-26 16:09:36 · 4383 阅读 · 0 评论 -
angular6 号(*)前缀
文章目录文章参考星号(*)前缀ngIf 指令ngFor 指令微语法文章参考星号(*)前缀星号(*)前缀星号是一个用来简化更复杂语法的“语法糖”。 从内部实现来说,Angular 把 *ngIf 属性 翻译成一个 元素 并用它来包裹宿主元素,代码如下:ngIf 指令<div *ngIf="hero" class="name">{{hero.name}}</div&...原创 2019-09-26 17:21:43 · 670 阅读 · 0 评论 -
angular6 动画学习
文章目录文章参考案例引入动画模块`BrowserAnimationsModule`组件添加动画的元数据属性`animations`定义HTML中需要使用动画的组件文章参考angular官网-动画案例引入动画模块BrowserAnimationsModule// 表明平台是在浏览器中import { BrowserModule } from '@angular/platform-br...原创 2019-09-29 11:48:32 · 407 阅读 · 0 评论 -
angular6 ngClass 和 ngStyle学习笔记
文章目录知识点ngClassngStyle案例文章参考Angular2 ngclass与ngstyle的使用知识点ngClass[ngClass]="‘css类1 css类2’"字符串以空格分割形式。[ngClass]="[‘css类1’,‘css类2’]"数组形式。[ngClass]="{‘css类1’:true, ‘css类2’:true}"key/value形式...原创 2019-10-01 14:04:54 · 2118 阅读 · 0 评论 -
angular6 自定义DOM节点属性(非标准DOM属性设置)
文章目录文章参考问题描述模板绑定是通过 property 和事件来工作的,而不是 attribute。自定义设置属性值文章参考angular5 给元素添加自定义属性问题描述今天想总结一下angular基础知识,想自己写一个自定义myname属性的demo,类似于jquery那样在某个element对象中添加属性,结果angular编译报错,提示是说myname不是div的属性模板绑定...原创 2019-07-26 13:43:46 · 1322 阅读 · 0 评论 -
angular6 内置管道(过滤器)
文章参考Angular管道的使用管道说明angular中的管道(pipe) 以及自定义管道-适用于angular4 angualr5 angualr6 angular7angular中的管道(pipe)是用来对输入的数据进行处理,如大小写转换、数值和日期格式化等。常用的管道(pipe)大小写转换{{str | uppercase}} //转换成大写{{str | low...原创 2019-07-26 09:08:02 · 1766 阅读 · 0 评论 -
angular6 表单双向绑定(select、checkbox、radio、input)
文章参考angular 常用模块如果不引入该模块,会出现编译器不报错,但是浏览器不显示内容的奇怪现象引入 FormsModuleimport { FormsModule } from '@angular/forms';案例/** * 告诉angular 如何组装应用 */import { BrowserModule } from '@angular/platform-...原创 2019-07-15 00:08:17 · 7814 阅读 · 0 评论 -
angular6 Directive自定义属性指令
文章参考属性指令指令创建ng g directive hbFontcolor案例指令的代码逻辑import { Directive, ElementRef, HostListener, Input } from '@angular/core';@Directive({ // 使用CSS选择器,如果属性中有appHbBackground,就表示使用了该主键 selector...原创 2019-07-15 00:08:19 · 4231 阅读 · 1 评论 -
angular6自定义服务service
文章参考指令创建serviceng g service storageServiceservice说明service 是一个单例,如果放在根路由下,就是在所有的组件都是共享的,因此可以利用service来传递和共享数据。案例自定义服务内容import { Injectable } from '@angular/core';@Injectable({ providedIn...原创 2019-07-15 00:08:21 · 3087 阅读 · 1 评论 -
angular6自定义Module对外提供服务
文章参考特性模块案例创建一个模块import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import {HuangbiaoIntroComponent} from '../hb-component/huangbiaoIntro/huangbiao-intro.comp...原创 2019-07-15 00:08:24 · 1608 阅读 · 0 评论 -
angular6 自定义管道pipe(过滤器)
文章参考管道使用命令创建ng generate pipe strLength生成 str-length.pipe.ts文件,文件后缀名前面需要指明组件类型指令内容引入 Pipe 和 PipeTransform 从 @angular/core模块中str-length.pipe.ts 文件import {Pipe, PipeTransform } from '@angular/...原创 2019-07-15 00:08:27 · 6134 阅读 · 0 评论 -
angular6 如何引入第三方css库
参考angular4引入其它css文件解决办法将 src/styles.css 中引入如需代码@import "./assets/bootstrap/css/bootstrap.min.css";为什么是修改src/styles.css这是因为在angular.json配置文件中添加了样式引入该文件{ "$schema": "./node_modules/@angula...原创 2019-07-15 00:08:33 · 3548 阅读 · 0 评论 -
angular6 路由的声明周期,拦截处理
文章参考Angular 5.0 来了! 有这些大变化路由器生成周期事件我们给路由器添加了新的生命周期事件,让开发者可以跟踪running guard启动到激活完成的各个阶段。这些事件可在有子组件更新时,在一个特定的路由器出口上展示加载动画,或者测量性能。新的事件(按顺序)是GuardsCheckStart、ChildActivationStart、ActivationStart、Gu...原创 2019-07-15 00:08:36 · 3187 阅读 · 0 评论 -
angular6使用PathLocationStrategy路由策略打包发布的问题
问题描述开发的一个angular项目,采用的是PathLocationStrategy路由策略,打包完成之后,直接运行index.html文件,发现引入的main.js路径不对,报404错误,项目中也引入了一些图片,也是路径引入不对,报404错误。经过调试发现,图片和main.js引入的全部是/根目录,受到&lt;base href="/" /&gt;这个影响,因此直接在index.html中...原创 2019-07-15 00:07:59 · 7970 阅读 · 0 评论 -
angular6.x hash/history路由(route)配置
文章参考路由与导航路由的两种策略PathLocationStrategy - 默认的策略,支持“HTML 5 pushState”风格。HashLocationStrategy - 支持“hash URL”风格。哪种策略更好?你必须选择一种策略,并且在项目的早期就这么干。一旦该应用进入了生产阶段,要改起来可就不容易了,因为外面已经有了大量对应用 URL 的引用。几乎所有的 A...原创 2019-07-15 00:13:59 · 5110 阅读 · 0 评论 -
angular6引入jquery和jquery插件
文章参考Angular杂谈系列1-如何在Angular2中使用jQuery及其插件angular4引入jQuery和基于jQuery的插件!案例说明一、angular-cli.json引入jquery和jquery插件"scripts": [ "node_modules/jquery/dist/jquery.js", "src/assets/bootstrapvali...原创 2019-07-15 00:13:57 · 4719 阅读 · 0 评论 -
angular6 操作dom节点需类型转换HTMLInputElement
问题背景使用angular发送邮件,其中有个表单是上传附件,这个是异步传递的数据,因此希望发送成功之后清空数据,因此就要单独对file表单做处理,然后做了如下代码document.getElementById('fileWidget').value='',由于我的代码一直处于热编译状态,没有报错,代码能够正常启动,最后提交代码之后同事启动,报编译错误;原因分析webpack正常启动之后只会做...原创 2019-07-15 00:08:11 · 1960 阅读 · 0 评论 -
angular6 代理 proxy 跨域解决办法
问题描述如果用ng serve 启动,则默认打开的是4200端口上传文件的后台使用的是nodejs 的express框架,默认是3000端口前后端属于两个不同的应用,因此存在跨域现象创建 proxy.config.json文件{ "/mail": { "target":"http://localhost:3000", "secure":false, "lo...原创 2019-07-15 00:07:56 · 4834 阅读 · 0 评论 -
angular6 如何引入SASS
文章目录文章参考加载依赖的库配置angular.js 文件样式文件改为scss后缀文章参考angular6 引入sass加载依赖的库cnpm install node-sass sass-loader -D配置angular.js 文件{…projects: {…“schematics”: {“@schematics/angular:component”:{“styl...原创 2019-07-26 08:39:29 · 593 阅读 · 0 评论 -
sringboot JPA javabean对象Date属性格式化
文章目录问题描述方案解决办法问题描述今天尝试着对一张表做增删改查,定了一个javabean对象,对象中包含Date,使用的是JPA做的相关查询,查询的集合中就包含Date对象,将结果集合返回给前端,发现前端是Date对象直接打印的字符串,因此就需要后台格式化之后传递给前端,由于对设计的Javabean对象没有做属性冗余,因此日期属性,就没有字符串来承载,因此考虑了如下方案对原有javab...原创 2019-07-12 18:11:56 · 953 阅读 · 0 评论 -
agular6.x 生命周期个人理解
文章目录文章参考构造函数必须掌握的ngOnInitngAfterViewInitngOnDestroy需要了解的ngDoCheckngAfterContentCheckedngAfterViewCheckedngOnChange文章参考构造函数组件运行的最早的函数,比任何一个生命周期函数要早用于依赖注入service等组件变量的初始化必须掌握的ngOnInit构造函数之...原创 2019-07-15 00:05:11 · 343 阅读 · 0 评论