白不懂黑的静的专栏

需求： Angular6的环境下，在一个页面中有一个<a>标签，点击链接后，需要跳转到新的页面（注意新的页面是在浏览器的新窗口中打开）。方案： 使用angular 的路由功能，使用 routerLink 属性处理。具体过程：1、新建一个组件，作为跳转界面的内容：ng g c childpage2、在新的childpage.component.html 模板文件中写自己需要展现的内容。3、开启angular的路由功能，并在路由文件(app-routing....

需求： Angular6框架下可以根据内容生成对应的二维码。方案： 这个我们直接使用 angular2-qrcode插件就可以。具体使用过程：1、首先安装 angular2-qrcodenpm install angular2-qrcode2、其次，在app.module.ts中引入QRCodeModule 模块import { NgModule } from '@angular/core';import { QRCodeModule } from '...

一、父组件给子组件传值 @Input父组件给子组件不仅可以传递简单的数据，还可以把父组件的方法以及整个父组件传递给子组件。1、父组件调用子组件的时候传入数据<app-header [title]="title"></app-header>2、子组件引入Input模块import {Component, Input, OnInit} from '@angular/core';3、子组件中@Input接收父组件传递过来的值export class .

场景： 在Angular6中需要在每隔3秒中调用一个方法，进行业务逻辑检查，若检查通过，则停止轮询，否则就一直轮询下去。方法： 直接使用 setInterval 和 clearInterval代码如下：const timer = setInterval(() => { // 设置轮询事件，每隔3秒轮询一次，查询订单是否已支付 //这里写实际的业务逻辑。。。。。。 if(进行判断){ //满足条件时，终止轮询 clearI...

1：全局引用一般我们会把本地的js文件放在assets目录下，然后在angular.json文件中的scripts中添加引用"scripts": ["xxx.js", "../../assets/yyy.js"]在调用插件的ts中 声明declare var myfunction: any，即可调用myfunction（）方法；2:局部调用，这种方法我们是在哪个ts文件中用，就在哪个文件中引入js文件，这种方法更适合我们自己写的js配置tsconfig.json文件...

背景：同样，本篇为根据学习视频的笔记记录，主要是angular实现的一个简单的侧边栏，并通过对dom的操作，实现侧边栏的动画隐藏显示的效果，很简单的一个示例。看代码：在主项目中建立一个动画组件ng g c transitiontransition.component.css#aside{ width: 200px; height: 100%; position: absolute; right: 0px; top: 0px; background: #000;

这篇笔记主要是以网上的一个视频教程为基础，记录视频中的实践操作，主要实现了一个类似于京东搜索和toDoList的操作，其中包括的知识点主要是Angular组件如何调用服务，以及通过服务实现Angular前端数据的持久化。先看最终的效果，说明，这个只是根据视频的一个Angular的示例，前端的样式几乎没有，重点是学习Angular的知识点。 在第一个搜索demo中，输入框中每次输入内容后，点击搜索，则下面的历史列表中会记录搜索的历史，当然也可以删除，同时数据会记录到localStorage中...

这里仅做个记录，一般在angular中直接通过原生的document 获取值是很少用的，其官方也不推荐，但往往有时在实际开发中需要用到，直接贴代码：视图层代码：<input type="text" id="username" >数据源文件中的取法： const usernameEL: any = document.getElementById('username'); const username: string = usernameEL.value; alert(u

首先，先看Angular官方中对数据绑定的描述：数据绑定是一种机制，用来协调用户可见的内容，特别是应用数据的值。 虽然也可以手动从 HTML 中推送或拉取这些值，但是如果将这些任务转交给绑定框架，应用就会更易于编写、阅读和维护。 你只需声明数据源和目标 HTML 元素之间的绑定关系就可以了，框架会完成其余的工作。也就是说把数据的绑定交给绑定框架去处理，开发人员只需要告诉框架绑定的框架是怎么样就行了。在了解双向绑定前，先看看angular中都有哪几种数据绑定：Angular 提供了多种数据绑

在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

1、创建一个名为myComName的组件：ng g component myComName2、绑定数据控制类定义属性：msg='这是我的消息'.html页面中获取上面的msg内容{{msg}}3、绑定属性<div [title]="msg"></div>4、绑定html控制类定义属性html = '<h4>我是在控制类中定义哈的html</h4>';html中调用[innerHTML]属性<

一、摘要 今天记录Angular6项目的打包部署。当我们开发好一套系统后，项目的部署也是很关键的一步。二、前提 已经有一个正常的Angular6开发环境，并且在本地的开发环境中可以正常的启动，访问自己的angular项目。三、需求 将项目打包后，放到服务器上，直接访问服务器地址，项目正常访问。四、具体过程 1、使用项目打包命令进行打包ng build --prod --base-href /project_name/主要参...

需求描述： 在操作结束后，需要在页面右下角弹出提示信息，且在一定的时间可以自动消失。现有环境：Angular6+bootStrap先看效果：方案：选取了ngx-toastr这个插件集成步骤：1、安装ngx-toastr和它的依赖@angular/animationsnpm install ngx-toastr --savenpm install @angular/animations --save2、在angular.json中添加css样式"styles"..

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 ...

环境： Angular6需求： angular环境下的表单开发，需要用到时间控件，在网上看到最多的是集成bootstrap的dateRangePicker,但是很多都是直接贴过来的，还存在一些实用性的问题，这里记录下自己的集成过程。一、首先确保自己的angular环境是可运行的，然后下载dateRangePicker所需文件。下面是结合网上的文档，做过调整后的dateRangePicker源码百度网盘地址：https://pan.baidu.com/s/1XPN45...

前提：Angular6+bootstrap需求：在一个简单的信息维护页面中，父页面是列表展现，列表上方有“新增、修改、删除”等按钮，这里新增和修改的表单提取出来，作为一个组件使用，然后在父组件中需要调用子组件的表单重置方法。思路：按照Angular官网的 “父组件与子组件通过本地变量互动”章节处理 在父组件中引入子组件的地方定义本地变量，然后在父模板中通过按钮点击的响应形式，调用子组件的方法，注意：这种方法，这里只能在父组件的模板中使用，在控制类中不可使用。核心代码：父组件：sysuser.

技术： Angular6+bootStrap需求： 做一个注册界面，界面上有一个密码输入框，默认情况下，密码框输入显示给客户是看不到明文的，但实际中，有时用户都不知道自己的密码是什么了，因此，在密码框中增加一个小图标，点击小图标后，密码框中的值可以进行显示和密码形式的切换。思路： 点击小图标后，小图标切换，密码输入框的type值在text和password之间进行切换涉及知识点： Angular6对dom的操作，尤其是对dom元素的属...

前提：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

在根据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...

需求：在angular2中，调用延时函数，在保存表单成功后，系统下方显示成功信息，在指定时间内若不手动关闭，则提示信息自动关闭。思路：保存成功后，调用setTimeout方法，回调函数为关闭提示框。原先代码为//关闭提示信息框 closePop = function () { this.mypop.nativeElement.style.display = "no...

前言：      开发模式采用前后端分离，前端用angular(这里指的是angular2,不要和angularjs混淆了),后端采用springBoot,主要介绍下angular与后端接口调用问题。思路：     其实官网都有调用，只是一些地方要注意到，而往往就是一些小细节或者小问题卡你半天，因此技术点无大小。正题：     前端angular定义了一个服务文件，专门放置与后...

在Angular中对异步数据的处理有以下几种:回调函数 Promise RXJS这里我们直接贴代码，前提是有可用的Angular开发环境，然后我们自己建立一个测试组件home,然后自己建立一个服务common然后在我们的app.component.html中引入home组件。1、首先在common.services.ts中定义3种测试方法，这里用延迟函数模拟异步数据import { Injectable } from '@angular/core';import {Observab