- 博客(19)
- 收藏
- 关注
RSS订阅原创 Angular学习笔记之-11.表单
Angular 表单简介响应式表单和模板驱动表单以不同的方式处理和管理表单数据。每种方法都有各自的优点。1.响应式表单提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比，更加健壮：它们的可扩展性、可复用性和可测试性都更高。如果表单是你的应用程序的关键部分，或者你已经在使用响应式表单来构建应用，那就使用响应式表单。2.模板驱动表单依赖模板中的指令来创建和操作底层的对象模型。它们对于向应用添加一个简单的表单非常有用，比如电子邮件列表注册表单。它们很容易添加到应用中，但在扩展性方面不如响应式表
2021-02-18 17:39:46
160
原创 Angular学习笔记之-10.路由
路由定义你的各个路由1.任务:1.路由 /crisis-center 用来打开 crisis-center 组件。2.路由 /heroes-list 用来打开 heroes-list 组件。2.相关代码 /* src/app/app.module.ts */ imports: [ BrowserModule, RouterModule.forRoot([ {path: 'crisis-list', component: C
2021-02-07 16:17:04
209
原创 Angular学习笔记之-9.依赖注入
Angular 中的依赖注入你可以在三种位置之一设置元数据，以便在应用的不同层级使用提供者来配置注入器：1.在服务本身的 @Injectable() 装饰器中。–'root’全应用可以使用的服务2.在 NgModule 的 @NgModule() 装饰器中。–应用或者某个模块可以使用的服务3.在组件的 @Component() 装饰器中。–在组件及子组件内使用的服务@Injectable() 装饰器具有一个名叫 providedIn 的元数据选项，在那里你可以指定把被装饰类的提供者放到 root
2021-02-07 15:39:02
381
原创 Angular学习笔记之-8.指令
内置指令1.Angular 提供了两种内置指令属性型指令和结构型指令。最常见的属性型指令如下：NgClass —— 添加和删除一组 CSS 类。NgStyle —— 添加和删除一组 HTML 样式。NgModel —— 将数据双向绑定添加到 HTML 表单元素。NgClass 用 ngClass 同时添加或删除几个 CSS 类1.相关代码```typescript import { Component } from '@angular/core'; @Component({
2021-02-07 15:10:01
133
原创 Angular学习笔记之-7.模块化
Angular模块化1.项目目录结构1.创建模块命令 (建议切换到想创建的目录下再执行此命令)ng g module components --routingng g module directives --routingng g module template --routing2.在该模块下创建组件(建议切换到想创建的目录下再执行此命令)ng g component xxx3.在根模块中引入子模块src\app\app.module.ts4.主模块设置子模块路由src\ap
2021-01-29 17:52:15
166
原创 Angular学习笔记之-6.管道
用管道转换数据内置管道及使用管道用来对字符串、货币金额、日期和其他显示数据进行转换和格式化。管道是一些简单的函数，可以在模板表达式中用来接受输入值并返回一个转换后的值1.Angular 为典型的数据转换提供了内置的管道，包括国际化的转换（i18n），它使用本地化信息来格式化数据。数据格式化常用的内置管道如下：DatePipe：根据本地环境中的规则格式化日期值。UpperCasePipe：把文本全部转换成大写。LowerCasePipe ：把文本全部转换成小写。CurrencyPipe ：把数字
2021-01-28 17:42:21
155
原创 Angular学习笔记之-5.动态组件
动态组件加载器 (与vue的动态组件的应用场景类似)译注：本页讲的是一个用于显示广告的范例，而部分广告拦截器插件，比如 Chrome 的 AdGuard，可能会破坏其工作逻辑，因此，请在本页关闭那些插件。我的理解: 这个demo将指令绑定在，通过指令的viewContainerRef能够获取宿主元素，再通过ComponentFactoryResolver 来为每个具体的组件解析出一个 ComponentFactory。 然后 ComponentFactory 会为每一个组件创建一个实例。最后通过取宿主元
2021-01-27 18:08:35
167
原创 Angular学习笔记之-4.组件样式
组件样式 范围化的样式 在 @Component 的元数据中指定的样式只会对该组件的模板生效1. :host 2. :host-context 3. 已废弃 /deep/、>>> 和 ::ng-deep 父组件影响后代组件的样式 类似vue中的 /deep/ 4. 模板中的 link 标签5. CSS @imports 语法:host 使用 :host 伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素）1.相关代码 import { C
2021-01-27 18:07:41
142
原创 Angular学习笔记之-3.组件之间的交互
组件之间的交互1.通过输入型绑定把数据从父组件传到子组件2.通过 setter 截听输入属性值的变化3.通过ngOnChanges()来截听输入属性值的变化4.父组件监听子组件的事件5.父组件与子组件通过本地变量互动6.父组件调用@ViewChild()7.父组件和子组件通过服务来通讯通过输入型绑定把数据从父组件传到子组件关键词 @Input()相关代码 import { Component, Input, OnInit } from '@angular/core';
2021-01-25 17:52:11
154
原创 Angular学习笔记之-2.视图包装
ShadowDom模式使用浏览器原生的 Shadow DOM 实现（参阅 MDN 上的 Shadow DOM）来为组件的宿主元素附加一个 Shadow DOM。组件的视图被附加到这个 Shadow DOM 中，组件的样式也被包含在这个 Shadow DOM 中。(译注：不进不出，没有样式能进来，组件样式出不去。)Emulated 模式（默认值）通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。 更多信息，见附录 1。(译注：只进不出，
2021-01-25 17:51:05
110
原创 Angular学习笔记之-1.生命周期
生命周期顺序ngOnChanges()当 Angular 设置或重新设置数据绑定的输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象注意，这发生的非常频繁，所以你在这里执行的任何操作都会显著影响性能。 欲知详情，参阅本文档的使用变更检测钩子。在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。注意，如果你的组件没有输入，或者你使用它时没有提供任何输入，那么框架就不会调用 ngOnChanges()。ngOnInit()在 A
2021-01-25 17:46:15
113
1
原创 elementui Tree 拖拽到目标区域并传递数据
<template> <div class="container"> <aside> <el-tree :data="data" node-key="id" default-expand-all @node-drag-start="handleDragStart" draggable :allow-drop="allowDrop"
2020-07-05 22:46:47
2199
2
原创 vue深入响应式原理 - 对象- 数组
项目结构2.fater.vue<template> <div> <h1>{{man}}</h1> <button @click="changeObj">添加对象属性</button> <button @click="changeObjAddr">改变对象的地址</button> <hr /> <h1>{{arr}}</h1>.
2020-07-05 16:11:55
178
1
原创 vuex-module-命名空间
默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。弊端1：不同模块中有相同命名的mutations、actions时，不同模块对同一 mutation 或 action 作出响应。弊端2：当一个项目中store分了很多模块的时候，在使用辅助函数mapState、mapGetters、mapMutations、mapActions时，很难查询，引用的state、getters、mutations、actions来自于哪个模块，不便于后期维护。..
2020-07-05 14:04:40
244
原创 echart自适应及重绘
一、自适应//第一次绘制时 自适应document.getElementById('ec_map').style.width = "100%";document.getElementById('ec_map').style.height = "7.61rem"; setTimeout(function () { chart.resize(); },100)//当窗口变化时 让echart 自适应window.onresie = function(){ docume
2020-06-28 16:39:38
461
原创 vue-cli中自定义播放器样式
<template> <div class="custom-video_container" ref="custom-video_container" @mouseover="handleControls($event, 'start')" @mouseleave="handleControls($event, 'end')"> <video class="custom
2020-06-04 17:03:27
362
转载 elementu - tree -分别设置 展开时图标 和 收起时图标
/* 引用 elementui - tree*/ <el-tree class="tree" :data="data" node-key="groupId" @node-click="asideCodeClick" :highlight-current="true" default-expand-all :props="defaultProps"> </el-tree>/*树形表格的
2020-06-04 16:48:12
1565
3
原创 echart中的自适应图标_中国地图
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2020-03-21 17:01:14
307
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人