angular
文章平均质量分 84
一天一丢丢
这个作者很懒,什么都没留下…
展开
-
angular12 angular.json
angular.json的配置信息原创 2022-11-15 11:58:07 · 1697 阅读 · 0 评论 -
angular 自定义组件的双向数据绑定
angular 组件的双向数据绑定自定义实现原创 2022-09-05 19:21:07 · 844 阅读 · 0 评论 -
angular 跨平台&dom操作&组件嵌套&投影
angular 跨平台angular 是跨平台的,不仅仅可以再pc端运行。anulgar 为跨平台做的工作为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异。比如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型:ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。通过 模板变量、@ViewChild 等方法获取DOM元素。不要使用window、 docu原创 2021-11-30 20:32:47 · 728 阅读 · 0 评论 -
angular中的 :host 、:host-context、::ng-deep
一、 :host:host 表示选择当前的组件1.1 选择宿主元素使用 :host 伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素),没有子元素就相当于选择整个宿主元素。如有下面html:<app-detail></app-detail>组件 app-detail 的样式(整个app-detail 的样式)如下 ::host { display: inline-block; background: red;}浏览器 Ele原创 2022-03-18 17:50:16 · 1804 阅读 · 0 评论 -
angular中的变更检测机制
angular中的变化检测机制什么是变更检测概括: 一种更改检测机制,用于遍历组件树,检查每个组件的变化,并在组件属性发生变化的时候触发DOM的更新变更检测的基本任务: 获得程序的内部状态并使之在用户界面可见。这个状态可以是任何的对象、数组、基本数据类型,…什么引起了变更基本上应用程序状态的改变可以由三类活动引起用户输入操作,比如点击,表单提交等请求服务端数据定时事件,比如 setTimeout,setInterval这几点有一个共同点,就是它们都是异步的,也就是说,所有的异步操作原创 2021-11-30 20:31:38 · 1519 阅读 · 0 评论 -
angular 内容投影
一、 ng-content 进行内容投影1.1 ng-contentng-content 元素是一个用来插入外部或者动态内容的占位符。父组件将外部内容传递给子组件,当 Angular 解析模板时,就会在子组件模板中 ng-content 出现的地方插入外部内容。我们可以使用内容投影来创建可重用的组件。这些组件有相似的逻辑和布局,并且可以在许多地方使用。一般我们在封装一些公共组件的时候经常会用到。1.2 为什么使用内容投影定义一个 button 组件:button-component.ts@C原创 2022-03-05 12:11:43 · 1589 阅读 · 0 评论 -
angular @Component 装饰器详解
一、 @Component 装饰器1.1 @Component 装饰器的用途声明一个组件时,在组件类的之上要用@Component装饰器来告知Angular这是一个组件。import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-product-alerts', templateUrl: './product-alerts.component.html', styleUrls: ['./pr原创 2022-03-03 20:53:05 · 1738 阅读 · 0 评论 -
angular基础16【动画】
16. 动画16.1 状态16.1.1 什么是状态状态表示的是要进行运动的元素在运动的不同时期所呈现的样式。16.1.2 状态的种类在 Angular 中,有三种类型的状态,分别为:void、*、customvoid:当元素在内存中创建好但尚未被添加到 DOM 中或将元素从 DOM 中删除时会发生此状态*:元素被插入到 DOM 树之后的状态,或者是已经在DOM树中的元素的状态,也叫默认状态custom:自定义状态,元素默认就在页面之中,从一个状态运动到另一个状态,比如面板的折叠和展开。原创 2021-12-26 19:50:31 · 590 阅读 · 0 评论 -
angular基础15【NgRx】
15. NgRx15.1 概述NgRx 是 Angular 应用中实现全局状态管理的 Redux 架构解决方案。@ngrx/store:全局状态管理模块@ngrx/effects:处理副作用@ngrx/store-devtools:浏览器调试工具,需要依赖 Redux Devtools Extension@ngrx/schematics:命令行工具,快速生成 NgRx 文件@ngrx/entity:提高开发者在 Reducer 中操作数据的效率@ngrx/router-store:将路由原创 2021-12-26 19:49:56 · 952 阅读 · 0 评论 -
angular基础14【HttpClientModule】
14. HttpClientModule该模块用于发送 Http 请求,用于发送请求的方法都返回 Observable 对象。14.1 快速开始引入 HttpClientModule 模块// app.module.tsimport { httpClientModule } from '@angular/common/http';imports: [ httpClientModule]注入 HttpClient 服务实例对象,用于发送请求// app.component.ts原创 2021-12-26 19:37:33 · 708 阅读 · 0 评论 -
angular基础13【RxJS】
13. RxJS13.1 概述rxjs官网学习 RxJS13.1.1 什么是 RxJS ?RxJS 是一个用于处理异步编程的 JavaScript 库,目标是使编写异步和基于回调的代码更容易。13.1.2 为什么要学习 RxJS ?就像 Angular 深度集成 TypeScript 一样,Angular 也深度集成了 RxJS。服务、表单、事件、全局状态管理、异步请求 …13.1.3 快速入门可观察对象 ( Observable ) :类比 Promise 对象,内部可以用原创 2021-12-26 19:30:30 · 1473 阅读 · 0 评论 -
angular基础12【路由】
12. 路由12.1 概述在 Angular 中,路由是以模块为单位的,每个模块都可以有自己的路由。12.2 快速上手创建页面组件、Layout 组件以及 Navigation 组件,供路由使用创建首页页面组件ng g c pages/home创建关于我们页面组件ng g c pages/about创建布局组件ng g c pages/layout创建导航组件ng g c pages/navigation创建路由规则// app.module.tsimport { Rout原创 2021-12-26 18:10:58 · 1878 阅读 · 0 评论 -
angular基础11【表单】
在 Angular 中,表单有两种类型,分别为模板驱动和模型驱动。原创 2021-12-26 18:00:05 · 968 阅读 · 0 评论 -
angular基础9-10【依赖注入&服务 Service】
9. 依赖注入9.1 概述依赖注入 ( Dependency Injection ) 简称DI,是面向对象编程中的一种设计原则,用来减少代码之间的耦合度。class MailService { constructor(APIKEY) {}}class EmailSender { mailService: MailService constructor() { this.mailService = new MailService("APIKEY1234567890") }原创 2021-12-26 17:34:43 · 594 阅读 · 0 评论 -
angular基础5-8【指令&管道&组件通讯&组件生命周期】
5. 指令 Directive指令是 Angular 提供的操作 DOM的途径。指令分为属性指令和结构指令。属性指令:修改现有元素的外观或行为,使用 [] 包裹。结构指令:增加、删除 DOM 节点以修改布局,使用*作为指令前缀5.1 内置指令5.1.1 *ngIf根据条件渲染 DOM 节点或移除 DOM 节点。<div *ngIf="data.length == 0">没有更多数据</div><div *ngIf="data.length >原创 2021-12-26 17:08:51 · 929 阅读 · 1 评论 -
angular基础1-4【概述&架构预览&快速开始&组件模板】
博文简述了angular架构,快速开始一个angular项目,讲解了部分组件模板相关的知识原创 2021-12-26 16:57:14 · 347 阅读 · 0 评论 -
angular 表单
angular 表单一、angular表单简介Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。 两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径。1.1 响应式表单与模板驱动表单的差异响应式表单提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比,更加健壮:它们的可扩展性、可复用性和可测试性都更高。如果表单是你的应用程序的关键部分,或者你已经在使用响应式表单来构建应用,那就使用响应式表单。模板驱动表原创 2021-02-21 20:32:37 · 1550 阅读 · 0 评论