Angular动态编译HTML模版
问题:需要打印的模版特别多,而且各不相同,可能需要经常改动,如果在前端进行单独创建组件的方式每次添加模版修改模版都要重新发布版本。
解决方式:通过把模版HTML保存到数据库的方式,根据调用打印的传参获取不同的打印模版
oracle中nvarchar最多存4000个字符数量 NCLOB最大存储大小为4gb
通 ...
Angular ng-zorro table拖拽配置列宽
一、技术框架及版本
JS框架 Angular,版本:6.0.0
UI框架 ng-zorro,版本:1.8.1
二、前提
搭建Angular环境
在Angular项目中引入ng-zorro
创建一个自定义指令,用于监听鼠标事件
在要监听的table 单元格元素标签上使用自定义指令
下面用一个demo示例来说明:
三、代码
在组件模板上使用ng-zorro table ,component ...
Angular 利用 marked.js 添加 Markdown + HTML 同时渲染的 Pipe
背景
最近在公司开发的一个项目需要在 Angular 上展示图文,并且需要同时支持 Markdown 和 HTML
对于同时支持 Markdown 和 HTML ,应该要分为编辑和渲染两部分考虑。
对于编辑,目前尚未找到同时支持两种格式的编辑器。我个人认为 Markdown 最好的开源编辑器是 Editor.md,最好的 HTML 编辑器是 UEditor,虽然他们俩都已经 ...
Angular 8 配置文件
给Angular 8 client 添加 json 配置文件,用来存储:版本号,WebApi 地址等等。要求 json 文件必须在页面访问 webapi 前获得到,不然数据服务中无法获得配置的 WebApi 地址。
1. 创建配置文件
你可以在 assets 目录下创建配置文件,也可以自己创建一个目录。这里我在 src 目录下创建了一个 config 目录,用来存放 开 ...
Angular 8 权限控制
1. 没有权限内的页面,自动跳转到“无法找到页面”
2. 没有权限的按钮,控件不显示
3. 没有登录token访问需要登录的页面,自动跳转到“无法找到页面”
思路:用一个service 去存储登录用户的权限列表。 在需要权限控制的按钮、控件上通过 *ngIf 控制控件可见性。在每个页面 active 之前去判断权限,并实现没有权限跳 ...
angular
一、模块
1、特性模块: 纯业务模块,一个顶级组件下挂很多子组件,大部分由declarations组成, 只导出顶出组件,若有服务的生命周期必须和模块相同。
2、路由特性模块:顶级组件只用作导航使用(懒加载),不会导出任何东西,不会被任何模块导入
3、路由模块
4、服务模块,不应该有声明对象,只应该由根组件导入
...
angularjs获取元素以及angular.element()用法
addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子 ...
Angular框架
Angular介绍
库和框架的区别
jQuery:库
库一般都是封装了一些常用的方法
自己手动去调用这些方法,来完成我们的功能code $('#txt').val('我是小明'); $('div').text('xx');
angular:框架
框架都是提供一种规范或者模式,
我们却要按照它提供的这种规则去写代码
框架会自动帮助我们去执行相应的代码.
其实可以简 ...
angular组件交互
摘要:本文主要介绍angular组件间的交互,以下将会把七种交互方式代码进行展示,并且分析各种方式所使用的情景。七种交互方式的描述(如"通过输入型绑定把数据从父组件传到子组件"这般)来源于Angular中文网。
一、通过输入型绑定把数据从父组件传到子组件
1.适用情景及描述
这种方式比较容易理解,一般适用于将父组件中 ...
angular自定义管道【pipe】
链接:https://juejin.im/post/58db5b55128fe1006cdf0bb3
angular中,管道的使用
管道一般适用于Mustache语法 的双向数据内, eg{{item |json}} 该例子采用了内置的JsonPipe管道。
若要带参数 则{{item |slice:0:4} 管道后面冒号跟随的就是参数
多重管道如何调用 {{item |slice:0:4|uppercase}}
如何书 ...
Angular 动态表单(根据选择联动显示)
Angular 动态表单(根据选择联动显示)
首先
记录一下刚刚完成的一个功能
需求是根据固定的层级结构做动态联动,在网上找了很多动态表单的相关教程,大部分都是在最开始加载就生成表单.而我的需求是需要在选择了父级之后再展示父级下的选项
参考了大佬的修仙之路 和 动态生成表单 感谢~
实现
准备阶段
配置好已知的层级结 ...
angular中NgModel的介绍
interface NgModule {
// providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
// 然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
providers : Provider[]
// declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
// ...
angular依赖注入
一、imports,declarations,providers介绍
imports中写入的是当前模块导入的其他模块,故imports应该导入的是module;declarations中写入的是当前模块内包含的公共组件、指令信息,故其中应该是声明的是components;prividers是导入当前模块可以使用的公共服务,也可以是其他npm包中的服务,故其中导入的应该是service。代码 ...
angular.js的 的上传功能实现---FileUploader
步骤:
1、
var uploader= new FileUploader({
url:需要上传的地址,
autoUpload: 是否将文件添加到队列后自动上传(Boolean),
headers: 与文件一起发送的头文件,只适合支持html5的浏览器,根据实际情况配置
});
2、
uploader.filters.push({
name: 自定义
fn: fun ...
angular - ngFor, trackby
ngFor
ngForOf指令通常使用缩写形式*ngFor为集合中的每个项呈现模板的结构指令。该指令放置在元素上,该元素将成为克隆模板的父级。
<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>
一般使用是:
const list = [{age: '16'}, {age: '18'}, {age: '15'}]
<li *ngFor="let item of list; inde ...
项目angular版本升级
p.p1 { margin: 0; font: 12px "Helvetica Neue"; color: rgba(228, 175, 10, 1) }
p.p2 { margin: 0; font: 12px "Helvetica Neue"; color: rgba(69, 69, 69, 1) }
p.p3 { margin: 0; font: 12px ".PingFang SC"; color: rgba(69, 69, 69, 1) }
p.p4 { margin: 0; font: 12px "Helvetica Neue"; color: rgba(69, 69, 69, 1 ...
angular 路由守卫
创建路由守卫
创建路由(CanActivate、CanActivateChild、CanDeactivate)守卫的命令为:
ng generate guard auth/auth(自定义)
创建Resolve守卫的方式有些许不同。这个要用在一个服务中继承
1、ng generate service test-resolve
2、在生成的服务继承Resolve<T>方法,并实现。其中Person是一个类
export class Tes ...
angular父子组件相互传值
// 调用子组件 向子组件传值和方法的方式<app-header [title]="title" [run]="run" [parent]="this"></app-header>
在子组件中,引入Input,通过@input() 方式引入,即可通过this.xxx使用
import { Component, OnInit, Input } from '@angular/core';@Component({ selector: 'app-header', templateUrl: './header.com ...
使用 Angular 打造微前端架构的 ToB 企业级应用
这篇文章其实已经准备了11个月了,因为虽然我们年初就开始使用 Angular 的微前端架构,但是产品一直没有正式发布,无法通过生产环境实践验证可行性,11月16日我们的产品正式灰度发布,所以是时候分享一下我们在使用 Angular 微前端这条路上的心得(踩过的坑)了额,希望和 Angular 社区一起成长一起进步,如果你对微前端有 ...
性能优化之Angular前端优化总结
简单总结接下我这边angular前端优化步骤都是满满的干货,各位客官有好的改进欢迎留言~
1. 动静分离
项目里面前端比较占用带宽的一般都是加载静态资源,请求后台接口一般占用带宽都是1kb左右,但是在加载静态资源往往会达到mb级别,占用大量带宽,明现影响了业务,所以动静分离是必须而且必要做的,angualr里面也会有指令来 ...