![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Angular6
白不懂黑的静
纸上得来终觉浅 绝知此事要躬行
展开
-
Angular6中打开新的窗口
需求: Angular6的环境下,在一个页面中有一个<a>标签,点击链接后,需要跳转到新的页面(注意新的页面是在浏览器的新窗口中打开)。方案: 使用angular 的路由功能,使用 routerLink 属性处理。具体过程:1、新建一个组件,作为跳转界面的内容:ng g c childpage2、在新的childpage.component.html 模板文件中写自己需要展现的内容。3、开启angular的路由功能,并在路由文件(app-routing....原创 2020-07-01 14:27:39 · 5022 阅读 · 2 评论 -
Angular6二维码组件
需求: Angular6框架下可以根据内容生成对应的二维码。方案: 这个我们直接使用 angular2-qrcode插件就可以。具体使用过程:1、首先安装 angular2-qrcodenpm install angular2-qrcode2、其次,在app.module.ts中引入QRCodeModule 模块import { NgModule } from '@angular/core';import { QRCodeModule } from '...原创 2020-07-01 10:38:46 · 3554 阅读 · 0 评论 -
Angular6学习笔记(七)父子组件通信
一、父组件给子组件传值 @Input父组件给子组件不仅可以传递简单的数据,还可以把父组件的方法以及整个父组件传递给子组件。1、父组件调用子组件的时候传入数据<app-header [title]="title"></app-header>2、子组件引入Input模块import {Component, Input, OnInit} from '@angular/core';3、子组件中@Input接收父组件传递过来的值export class .原创 2020-07-02 16:55:46 · 267 阅读 · 0 评论 -
Angular6的轮询及终止轮询
场景: 在Angular6中需要在每隔3秒中调用一个方法,进行业务逻辑检查,若检查通过,则停止轮询,否则就一直轮询下去。方法: 直接使用 setInterval 和 clearInterval代码如下:const timer = setInterval(() => { // 设置轮询事件,每隔3秒轮询一次,查询订单是否已支付 //这里写实际的业务逻辑。。。。。。 if(进行判断){ //满足条件时,终止轮询 clearI...原创 2020-06-30 15:34:05 · 1211 阅读 · 0 评论 -
Angular6调用js文件的两种方式
1:全局引用一般我们会把本地的js文件放在assets目录下,然后在angular.json文件中的scripts中添加引用"scripts": ["xxx.js", "../../assets/yyy.js"]在调用插件的ts中 声明declare var myfunction: any,即可调用myfunction()方法;2:局部调用,这种方法我们是在哪个ts文件中用,就在哪个文件中引入js文件,这种方法更适合我们自己写的js配置tsconfig.json文件...原创 2020-06-29 16:53:01 · 2549 阅读 · 0 评论 -
Angular学习笔记(六)-Angular操作dom实现侧边栏的显示与隐藏的动画效果
背景:同样,本篇为根据学习视频的笔记记录,主要是angular实现的一个简单的侧边栏,并通过对dom的操作,实现侧边栏的动画隐藏显示的效果,很简单的一个示例。看代码:在主项目中建立一个动画组件ng g c transitiontransition.component.css#aside{ width: 200px; height: 100%; position: absolute; right: 0px; top: 0px; background: #000;原创 2020-06-28 17:35:40 · 1186 阅读 · 1 评论 -
Angular学习笔记(五)之Angular服务及实现数据前端持久化
这篇笔记主要是以网上的一个视频教程为基础,记录视频中的实践操作,主要实现了一个类似于京东搜索和toDoList的操作,其中包括的知识点主要是Angular组件如何调用服务,以及通过服务实现Angular前端数据的持久化。先看最终的效果,说明,这个只是根据视频的一个Angular的示例,前端的样式几乎没有,重点是学习Angular的知识点。 在第一个搜索demo中,输入框中每次输入内容后,点击搜索,则下面的历史列表中会记录搜索的历史,当然也可以删除,同时数据会记录到localStorage中...原创 2020-06-24 17:28:04 · 381 阅读 · 0 评论 -
Angular6学习笔记(四)之使用原生的js获取视图控件的值
这里仅做个记录,一般在angular中直接通过原生的document 获取值是很少用的,其官方也不推荐,但往往有时在实际开发中需要用到,直接贴代码:视图层代码:<input type="text" id="username" >数据源文件中的取法: const usernameEL: any = document.getElementById('username'); const username: string = usernameEL.value; alert(u原创 2020-06-24 10:13:19 · 248 阅读 · 0 评论 -
Angular学习笔记(三)之双向绑定
首先,先看Angular官方中对数据绑定的描述:数据绑定是一种机制,用来协调用户可见的内容,特别是应用数据的值。 虽然也可以手动从 HTML 中推送或拉取这些值,但是如果将这些任务转交给绑定框架,应用就会更易于编写、阅读和维护。 你只需声明数据源和目标 HTML 元素之间的绑定关系就可以了,框架会完成其余的工作。也就是说把数据的绑定交给绑定框架去处理,开发人员只需要告诉框架绑定的框架是怎么样就行了。在了解双向绑定前,先看看angular中都有哪几种数据绑定:Angular 提供了多种数据绑原创 2020-06-23 17:05:00 · 440 阅读 · 0 评论 -
Angular学习笔记(二)([ngClass]、[ngStyle])
在angular中可以通过 [ngClass]、[ngStyle]动态的设定模板元素的样式ts文件:import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']})export class HomeComponent impl原创 2020-06-22 17:46:50 · 221 阅读 · 0 评论 -
Angular学习笔记(一)(属性绑定)
1、创建一个名为myComName的组件:ng g component myComName2、绑定数据控制类定义属性:msg='这是我的消息'.html页面中获取上面的msg内容{{msg}}3、绑定属性<div [title]="msg"></div>4、绑定html控制类定义属性html = '<h4>我是在控制类中定义哈的html</h4>';html中调用[innerHTML]属性<原创 2020-06-22 17:05:13 · 360 阅读 · 0 评论 -
Angular6项目的打包部署
一、摘要 今天记录Angular6项目的打包部署。当我们开发好一套系统后,项目的部署也是很关键的一步。二、前提 已经有一个正常的Angular6开发环境,并且在本地的开发环境中可以正常的启动,访问自己的angular项目。三、需求 将项目打包后,放到服务器上,直接访问服务器地址,项目正常访问。四、具体过程 1、使用项目打包命令进行打包ng build --prod --base-href /project_name/主要参...原创 2020-06-22 15:34:28 · 3839 阅读 · 0 评论 -
angular6 使用信息提示框toast
需求描述: 在操作结束后,需要在页面右下角弹出提示信息,且在一定的时间可以自动消失。现有环境:Angular6+bootStrap先看效果:方案:选取了ngx-toastr这个插件集成步骤:1、安装ngx-toastr和它的依赖@angular/animationsnpm install ngx-toastr --savenpm install @angular/animations --save2、在angular.json中添加css样式"styles"..原创 2020-06-19 17:29:15 · 1649 阅读 · 1 评论 -
Angular环境搭建
Angular环境搭建1、安装前准备工作: 1.1 安装node.js 确保你的开发环境中包括 Node.js® 和一个包管理器 Angular 需要 Node.js 版本 10.9.0 或更高版本 node.js下载地址:https://nodejs.org/zh-cn/1.2 安装cnpm(当然这个可以不安装,只是为了提高安装速度) 因为有时候用npm会安装失败,所以建议先用npm先安装cnpmnpm install -g cnpm ...原创 2020-06-20 17:35:10 · 159 阅读 · 0 评论 -
Angular6集成bootstrap dateRangePicker
环境: Angular6需求: angular环境下的表单开发,需要用到时间控件,在网上看到最多的是集成bootstrap的dateRangePicker,但是很多都是直接贴过来的,还存在一些实用性的问题,这里记录下自己的集成过程。一、首先确保自己的angular环境是可运行的,然后下载dateRangePicker所需文件。下面是结合网上的文档,做过调整后的dateRangePicker源码百度网盘地址:https://pan.baidu.com/s/1XPN45...原创 2020-06-16 10:55:24 · 373 阅读 · 0 评论 -
Angular6中父组件调用子组件方法--本地变量调用
前提:Angular6+bootstrap需求:在一个简单的信息维护页面中,父页面是列表展现,列表上方有“新增、修改、删除”等按钮,这里新增和修改的表单提取出来,作为一个组件使用,然后在父组件中需要调用子组件的表单重置方法。思路:按照Angular官网的 “父组件与子组件通过本地变量互动”章节处理 在父组件中引入子组件的地方定义本地变量,然后在父模板中通过按钮点击的响应形式,调用子组件的方法,注意:这种方法,这里只能在父组件的模板中使用,在控制类中不可使用。核心代码:父组件:sysuser.原创 2020-06-10 15:16:43 · 1467 阅读 · 0 评论 -
Angular6 下的注册界面中的密码框隐藏密码和明文密码切换
技术: Angular6+bootStrap需求: 做一个注册界面,界面上有一个密码输入框,默认情况下,密码框输入显示给客户是看不到明文的,但实际中,有时用户都不知道自己的密码是什么了,因此,在密码框中增加一个小图标,点击小图标后,密码框中的值可以进行显示和密码形式的切换。思路: 点击小图标后,小图标切换,密码输入框的type值在text和password之间进行切换涉及知识点: Angular6对dom的操作,尤其是对dom元素的属...原创 2020-06-05 15:23:56 · 1194 阅读 · 0 评论 -
Angular6中获取当前日期
前提:Angular6中需要获得当前日期并格式化,查看文档后发现有formatDate方法,如下使用:import { Component, OnInit, Inject, LOCALE_ID } from '@angular/core';import { formatDate } from '@angular/common';export class LoginComponent implements OnInit { constructor(@Inject(LOCALE_ID) priv原创 2020-06-04 17:16:23 · 1706 阅读 · 0 评论 -
npm ERR! Error: EPERM: operation not permitted
在根据angular4官网的例子做时,安装完node.js和angular/cli后,进行新建项目 采用命令ng new my-app时,报如下错误npm WARN tarball tarball data for @angular/compiler@^6.1.0 (sha1-arNchYT72hOmcI3xS4sDzI+EmpQ=) seems to be corrupted. Tryi...原创 2018-10-16 22:48:11 · 18890 阅读 · 7 评论 -
Angular2 中setTimeOut 回调函数未定义问题
需求:在angular2中,调用延时函数,在保存表单成功后,系统下方显示成功信息,在指定时间内若不手动关闭,则提示信息自动关闭。思路:保存成功后,调用setTimeout方法,回调函数为关闭提示框。原先代码为//关闭提示信息框 closePop = function () { this.mypop.nativeElement.style.display = "no...原创 2018-09-03 22:16:42 · 5087 阅读 · 0 评论 -
Angular前端与springBoot后端的http请求交互
前言: 开发模式采用前后端分离,前端用angular(这里指的是angular2,不要和angularjs混淆了),后端采用springBoot,主要介绍下angular与后端接口调用问题。思路: 其实官网都有调用,只是一些地方要注意到,而往往就是一些小细节或者小问题卡你半天,因此技术点无大小。正题: 前端angular定义了一个服务文件,专门放置与后...原创 2018-08-16 10:01:11 · 17442 阅读 · 4 评论 -
Angular6学习笔记(八)Angular中异步处理总结---RXJS
在Angular中对异步数据的处理有以下几种:回调函数 Promise RXJS这里我们直接贴代码,前提是有可用的Angular开发环境,然后我们自己建立一个测试组件home,然后自己建立一个服务common然后在我们的app.component.html中引入home组件。1、首先在common.services.ts中定义3种测试方法,这里用延迟函数模拟异步数据import { Injectable } from '@angular/core';import {Observab原创 2020-07-03 17:22:44 · 1219 阅读 · 0 评论