angular中路由跳转并传值四种方式
一、路由传值
步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2&name=xiaoming
<div class="z-shebei-box1 x-mysh-p" style="width: 100%;" *ngFor='let item of deviceInfo.list ;let key = index;'>
...
几种流行的前端框架(BootStrap、Layui、Element-UI、Mint UI、Angular、Vue.js、React)
1.BootStrap让你的页面更简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、更简单。它还提供了更优雅的HTML和CSS规范,它即是由动态的CSS语言LESS写成。有着丰富的网络布局系统以及丰富的可重用组件,还有强大的支持十几的JavaScript、JQuery插件以及组件定制等。
官网:https://v2.bootcss.com/
2 ...
Angular封装WangEditor富文本组件
富文本组件是web程序中很常用的一个组件,特别是要开发一个博客,论坛这类的网站后台。
得益于Angular的强大,封装WangEditor组件非常简单
1.使用yarn或者npm安装wangeditor
yarn add wangeditor
2.创建一个Angular的组件
ng g c q-wang-editor
3.封装组件逻辑
3.1 模板
<div #wang></div>
3.2 ts逻辑
import { Compo ...
Angular ViewContainerRef TemplateRef ElementRef
Angular: ViewContainerRef, ElementRef, TemplateRef, ComponentRef
Basic introduction to these four concepts
ViewContainerRef
definition from angular Doc: Represents a container where one or more views can be attached to a component, But, this sentense sounds a little strange or meaningless.
keep thes ...
Angular 学习笔记 (Angular 12 get started)
Angular 12 视乎比以往更稳定了.
这里记入一般的 get started 结构和做法.
第 1 步, 创建项目.
ng new project --create-application=false
默认会自动创建 app, 先关掉它.
第 2 步, 装 eslint 和 prettier
早期 ng 是用 tslint 的, 后来废弃了, 现在改用 eslint
https://github.c ...
Angular 入门(二)
先简单回顾上篇所介绍的知识点:
Angular相关命令:
脚手架的安装: npm i -g @angular/cli --force
生成项目包: ng new 包名 生成过程中的选项 都直接回车选用默认项即可.
启动命令: ng s -o
生成组件: ng g c 组件名
Angular的一些用法:
插值: {{}}
属性的绑定: [属性名]="值" 或 属性名="{{值}}"
事件: (事件名)="方法名 ...
Angular 入门(一)
前端三大框架 :
Vue:开源项目,适合中小型项目
React:Facebook公司 ,适合中小型项目+RN手机端开发
Angular:Google公司,适合大型项目;简称NG,和Vue年相似
初识Angular______________________________
脚本方式: 适合最基本的入门, 实际开发没用.
脚手架方式: 属于工程化的开发方式, 利用脚手架生成完善的项目包.
安装脚手架: ...
手把手教你搭建自己的Angular组件库 - DevUI
摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸、灵活、至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品,DevUI 将是一个很不错的选择!
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台 ...
前端框架之争丨除了Vue、Angular和React还有谁与之争锋
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文参考:https://www.sitepoint.com/most-popular-frontend-frameworks-compared/
近些年,前端开发领域涌现出了大量框架,让人眼花缭乱,不知如何选择。今天我们将为您对比五个最流行的前端JavaScript框架,并作 ...
2021 年最值得推荐的 7 个 Angular 前端组件库 - DevUI
摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸、灵活、至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品,DevUI 将是一个很不错的选择!
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为 ...
Angular 多重路由
文中使用的工具或者包的版本:Angular CLI 11.0.6
文中 Demo 链接:https://stackblitz.com/edit/angular-route-outlet-3crvst
配置
首先我们在模板中定义多个路由出口,比如:
<router-outlet></router-outlet>
<router-outlet name="second"></router-outlet>
<router-outlet name="third"></router-outlet>
注意路由 ...
简谈 Angular 动态绑定样式的几种方法
动态绑定样式的本质是操作元素的 class 列表和内联样式。因为 class 和 style 都是 attribute,所以我们可以用 Attribute 绑定处理它们:只需要通过表达式计算出字符串结果即可。同理我们也可以用 Property 绑定处理。另外,Angular 还提供了专门的 class Attribute 绑定和 style Attribute 绑定。内置属性型指令 NgClass ...
Angular响应式表单及封装表单控件
响应式表单也叫模型驱动型表单。
有三个重要元素FormControl,FormGroup和FormBuilder。还有一个FormArray。
验证器和异步验证器。
动态指定验证器。条件改变验证方式改变。
自定义FormControl。用于表单过于复杂之后,逻辑难以理清楚。把复杂问题拆成若干简单问题永远是万能钥匙。用于简化form表单自己的逻辑。
一、登录表 ...
[译]Rxjs&Angular-退订可观察对象的n种方式
原文/出处: RxJS & Angular — Unsubscribe Like a Pro
在angular项目中我们不可避免的要使用RxJS可观察对象(Observables)来进行订阅(Subscribe)和退订(Unsubscribe)操作;
概述
我们的每个angular项目中都会用到RxJS, RxJS在我们的angular app中对数据流和性能有非常大的影响。
为了避免内存泄漏,在适当的时机对可观察对 ...
Angular入门到精通系列教程(14)- Angular 编译打包 & Docker发布
目录1. 概要2. 编译打包2.1. 基本打包命令2.2. 打包部署到二级目录3. Angular站点的发布3.1. web服务器发布3.2. 使用docker发布4. 总结
环境:
Angular CLI: 11.0.6
Angular: 11.0.7
Node: 12.18.3
npm : 6.14.6
IDE: Visual Studio Code
1. 概要
当我们完成angular的开发后,如何部署到服务器呢?
2. 编译打包
2.1. 基 ...
Angular 同步async、await 使用方式
理解 async/await
Angular 请求同步async、await使用方式
promise, async和await
场景:发送前端一个请求,在获取到响应以后,将数据存入localstorage,然后跳转页面。
问题:由于请求是异步的,所以可能存在先跳转了页面,数据才从服务器返回的情况。通过硬编码的方式可能会写很多层回调函数。
mainFunction(item) {
...
angular的组件传值
angular组件传值存在三种情况,分别是父传子 ,子传父,以及非父子之间进行传值
1.父传子
通过在子组件上绑定属性或者方法,在子组件xxx.componet.ts中 导入Input类, 进行接收,可以获取父组件传过来的内容
父组件.html
<app-home [msg] = 'msg' [run]='logApp' [home]='this'></app-home>
// msg是数据 logApp是方法名 thi ...
Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)
前言:
首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学),所以今天准备出一篇Angular学习资料汇总和日常开发中使用比较频繁的语法总结。让更多的后端程序员更好的了 ...
angular学习合集
源码探索模块
angular11源码探索二十六Router整体路由配置
angular11源码探索二十五Router路由事件
angular11源码探索二十四路由检测变更策略
angular11源码探索二十三路由forRoot
angular11源码探索二十二路由Route下路由守卫
angular11源码探索二十一路由Route上
angular11源码探索二十路由ActivatedRo ...
解决Cannot find module '@angular/compiler-cli'
前言:
今天clone之前做的一个angular项目,使用ng serve一直提示An unhandled exception occurred: Cannot find module '@angular/compiler-cli'。首先有这个提示的异常我们可以知道这其实就是我们项目中的相关依赖没有安装好的额原因,在node_modules文件夹中找不到。首先检查一下自己电脑上的npm环 ...