代码编织梦想

Angular服务器渲染常遇的坑-爱代码爱编程

前言 由于官网有SEO需要,因此对现官网项目进行ssr的整改兼容,在调试的过程中遇到了不少问题。本来在官网的demo项目中使用是比较顺畅的,但是由于本项目比较大复杂性比较高,踩了不少的坑。以下是我在调试过程中遇到的一些问题汇总,希望其他人可以避开这些坑。 1. 使用浏览器 API报错问题 在运行服务的时候,通常会遇到一下的一些报错 Referenc

Angular的常用命令-爱代码爱编程

•命令行 创建项目包ng new 项目名 启动命令 ng s 或 ng s -o 生成组件 ng g c 组件名 生成管道 ng g p 管道名 生成指令 ng g d 指令名 •angular用法 双标签内容: {{}}属性: [属性名]=‘值’ 或 属性名="{{ 值 }}"事件: (事件名)=‘方法名()’双向数据绑定

Angular 网络请求中subscribe如何正确接收值-爱代码爱编程

标题Angular 网络请求中subscribe如何正确接收值 常规请求中都是利用一个回调函数 返回接收到的值,如 (res)=>{ //打印接收到的结果 console.log(res) } 这样接收没错,思路也是没有问题的但是在Angular 的typeScriprt中对变量的类型要求很严格,所以要声明res 的类型否则在自己的作用域中

Angular-ionicUI-简单组件入手-爱代码爱编程

Angular-ionicUI-简单组件入手 项目启动命令: ionic s 组件库: https://ionicframework.com/docs/components 按钮组件 https://ionicframework.com/docs/api/button <!-- 按钮组件 --> <ion-app&

彻底弄懂 Angular RouteReuseStrategy 路由复用策略-爱代码爱编程

Angular 路由复用策略 RouteReuseStrategy 实现动态路由tab切换 在线Live 关于路由复用一直没有弄懂,网上的代码也是说的很朦胧,自己也一直没有弄懂。今天从调用顺序一步步开始,以及如何做路由存储给你们做个详细讲解。附上tab切换,以及自动生成新tab的demo(gihub代码已经托管了),希望可以帮助到爱学习的你们。 引言

Angular缺陷之一 ng-for 不能遍历对象属性中的数字怎么办?-爱代码爱编程

Angular缺陷之一 ng-for 不能遍历对象属性中的数字怎么办? 这也是在学习过程中遇见的一个问题,很常见,觉得有必要记录,如果你碰巧在寻找这方便的解决办法,那很巧,正好我做记录了。 vue 跟 Angular的整体使用方式非常的相似,只不过 Angular 中的用的是Type Script语言,将Java和js 进行结合,如果这两种语言你都学过,

手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件-爱代码爱编程

  DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师。 官方网站:devui.design Ng组件库:ng-devui(欢迎Star) 引言 “他在正午、黄昏,在一天里的许多时刻去感受它、记录它,结果也就让我们看到了那么多的不同。他描绘它的角度没变,但它

Angular父子组件传递方法的关键点-爱代码爱编程

概要 Angular的父子组件传递的数据,既可以是我们传统意义上的数字,字符串等数值类型,也可以是一个方法。对于数值类型,只要按照文档的说明进行传递,一般不会有问题。但是对于方法的传递,则并不能与普通的数值传递划等号。 本文以一个常见的错误实例来说明父子组件传递方法的关键点。 设计与实现 开发需求 本文通过一个Menu组件实例来说明父子组件的方法

nz-zorro 主题切换 动态-爱代码爱编程

主题切换 当使用 @angular/cli 的方式配置主题时必须为每个主题单独打包应用,当你想切换主题而不重新加载应用时(就像这个网站),你可以使用下面的方法将主题编译到单独的样式文件,并在运行时切换: 注意:确保与主题变量相关的样式存在全局样式中,而不是组件样式中,因为组件样式优先级更高将会导致样式无法被覆盖。 1、安装依赖 用于将暗黑模式的les

构建AngularJS项目的三种方法-爱代码爱编程

构建AngularJS项目的三种方法 概述手工项目angular-seed项目安装方法目录结构Yeoman项目安装方法安装依赖npm install 报错解决方法初始化bowerbower安装angular 概述 手工项目:自己建目录,下载类库,写html,js,css,自己实现引用关系angular-seed项目:下载github的a

Ionic 项目总结-爱代码爱编程

开始: 一:当开始一个项目时,应该先分析该项目的组成,例如 某数据大屏,共分为八大模块 1. 头部header模块,包括是项目的title,一些时间的组成 2. 左边(line-area)三个echarts图模块,这三块echarts功能相似,都为折线图,所以可以将它作为一个组件复用,动态的传递不同的参数即可。 3. 中上部分模块(order-l

angular的踩坑之路-爱代码爱编程

angular的踩坑之路 vscode中export class报错vscode中配置了angular.json中指定的tsConfig的compilerOptions的paths属性,路径对了,但vscod仍报错 vscode中export class报错 版本号: ~10.0.6 & ~11.0.1 问题描述: Experime

Angular(渲染及管道)-爱代码爱编程

Angular 使用时, 需要安装脚手架, 利用脚手架生成项目包; 然后编写代码. 生成命令: ng new ngpro 用法: • 双标签的内容: {{ 变量 }} • 属性: [属性名]=“值” 或 属性名="{{ 值 }}" • 事件: (事件名)=“方法名()” • 双向数据绑定: [(ngModel)]=" 变量 " – 注意: 默认不

Angular中的@Self和@Host装饰器比较-爱代码爱编程

概要 依赖注入是Angular框架的重要组成部分。如果将root模块比作树的根节点,Angular 应用程序有多个依赖注入器,组织成一个与组件树平行的树状结构。每个注入器都会创建依赖的一个单例。 默认情况下,对于依赖注入的对象,Angular会先从当前组件的注入器中开始查找,经历父组件注入器,当前模块注入器和根模块注入器。直到找到需要依赖注入的对象。

上手filter map reduce方法-爱代码爱编程

大家好没, 我是热狗得小舔狗! ES6高级数组函数:filter map reduce方法都是对数组进行操作。及其方便,也很好理解。下面是我整理的资料,希望对你有所帮助!! 目录 filter()方法简介及解析map()方法简介及解析reduce()方法简介及解析reduce()方法扩展:总结 filter()方法简介及解析 filter(过

angular新手如何学习angular?-爱代码爱编程

我分享一下我是如何入门Angular的,可能也不是最有效的方式,希望有些参考价值吧。 没有基础能学吗?     我的回答是能。     我在学习Angular之前甚至不知道前端的三大框架都有啥。没学过JavaScript+html+css。唯一的基础是比较熟悉C++(笑)。     众所周知菊厂不重视前端,基本都是后端兼着写。一天,老大让我给我们产品

箭头函数this独有心得-爱代码爱编程

大家好, 我是VHotdog,热狗得小舔狗。 箭头函数 具体用法介绍实例非箭头函数this指向问题箭头函数this指向问题栗子再来个栗子注意扩展:es6 扩展运算符 三个点(...) ES6标准新增了一种新的函数:Arrow Function(箭头函数)。 为什么叫Arrow Function?因为它的定义用的就是一个箭头: 先康一下它的样子

Docker部署Angular应用-爱代码爱编程

写在最前面 首先是我的目录结构 你要新建的是Dockerfile和nginx-angular.conf Dockerfile 在 Angular 项目的根目录下面创建一个 Dockerfile 文件,内容如下 #设置一个基本的镜像,FROM 后面是镜像的名字,这个镜像是 Docker 官方提供的,这个镜像里面包含了 Node.js,可以在node后跟

安装angular脚手架-格式化工具-启动项目-爱代码爱编程

安装脚手架 1. 先确保npm是中国镜像 以及 node版本node尽量是最新版本: 至少>=10.9下载地址: http://nodejs.cn/download/node -v 3. 检查npm镜像是否为中国镜像重装 node都会重置镜像 4. 查看当前镜像 npm config get registry 5.设置为淘宝镜像 n

angular,Typescript常用正则-爱代码爱编程

祖传正则了,积累了一些记录一下 单独建的ts文件 // 不能纯符号或纯数字 export function canNotNumberOrSymbol(x: number, y: number) { // tslint:disable-next-line:no-eval return eval('/^(?![0-9]+$)(?!^[^a-z