分类：Angular

2021
12-09

Angular封装WangEditor富文本组件的方法

富文本组件是web程序中很常用的一个组件，特别是要开发一个博客，论坛这类的网站后台。得益于Angular的强大，封装WangEditor组件非常简单1.使用yarn或者npm安装wangeditoryarnaddwangeditor2.创建一个Angular的组件nggcq-wang-editor3.封装组件逻辑3.1模板<div#wang></div>3.2ts逻辑import{Component,ElementRef,EventEmitter,Input,OnDestroy,OnInit,Output,ViewChild,ViewEncapsulation}from'@angular/core... 继续阅读 >

2021
11-17

使用Angular CDK实现一个Service弹出Toast组件功能

目录1.环境安装2.创建Toast组件和ToastService2.1编写Toast组件和样式在Angular中，官方团队在开发Material组件库的同时，顺手做了一套Componentdevkit，也就是在Angular世界中大名鼎鼎的CDK，这套工具包提供了非常多的前端开发的通用功能。Angular的知名组件库几乎都依赖了这套开发包。比如ANT，PrimeNG等。本文主要写用cdk实现一个简单的Toast组件，使用的是cdk中的overlay模块。1.环境安装cdk不是angular的默认模块，需要手动... 继续阅读 >

2021
10-17

一篇文章快速了解Angular和Ionic生命周期和钩子函数

目录Angular实现调用顺序注意Ionicionic是怎么处理页面的生命周期的路由守卫总结Angular实现首先实现方式不用多说，使用钩子函数需要在定义的时候实现对应的接口exportclassListPageimplementsOnInit{constructor(){}ngOnInit(){//codehere}}调用顺序1、constructor最先执行的是构造函数，在执行构造函数的时候，@Input、@ViewChild等很多变量都是不存在的，相关操作最好写在ngOnInit里。2、ngOnChanges当前组... 继续阅读 >

2021
07-16

浅谈Angular的12个经典问题

目录1.请解释Angular2应用程序的生命周期hooks是什么？2.使用Angular2，和使用Angular1相比，有什么优势？3.Angular2中的路由工作原理是什么？4.什么是事件发射器？它是如何在Angular2中工作的？5.如何在Angular2应用程序中使用codelyzer？6.什么是延迟加载？如何在Angular2中启用延迟加载？7.在Angular2应用中，我们应该注意哪些安全威胁？8.如何优化Angular2应用程序来获得更好的性能？9.如何实现不出现编辑器... 继续阅读 >

2021
07-09

详解Angular依赖注入

目录概述一、依赖注入二、Angular的依赖注入框架概述依赖注入：设计模式依赖：程序里需要的某种类型的对象。依赖注入框架：工程化的框架注入器Injector：用它的API创建依赖的实例Provider:怎样创建？（构造函数,工程函数）Object：组件，模块需要的依赖依赖性注入进阶=>Angular中依赖注入框架提供父子层次注入型依赖一、依赖注入classId{staticgetInstance(type:string):Id{returnnewId();}}classAddress{cons... 继续阅读 >

2021
07-09

详解Angular项目中共享模块的实现

目录一、共享CommonModule二、共享MaterialModule三、共享ConfirmDialog一、共享CommonModule创建shareModele：nggmshareimport进来所有需要共享的模块都export出去，暂时只有CommonModule,以后会有一些需要共享的组件。import{NgModule}from'@angular/core';import{CommonModule}from'@angular/common';@NgModule({imports:[CommonModule],exports:[CommonModule],declarations:[]})exportcla... 继续阅读 >

2021
07-09

详解Angular路由之子路由

目录一、子路由语法二、实例1、新建2个组件修改其内容2、修改路由配置3、修改product.component.ts的模版一、子路由语法二、实例在商品详情页面，除了显示商品id信息，还显示了商品描述，和销售员的信息。通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部。1、新建2个组件修改其内容nggcomponentproductDescnggcomponentsellerInfo重点是修改销售员信息组件，显示销售员ID。import{Component,OnInit}... 继续阅读 >

2021
07-09

详解Angular之路由基础

目录一、路由相关对象二、路由对象的位置三、路由配置四、代码中通过Router对象导航五、配置不存在的路径六、重定向路由七、在路由时候传递数据一、路由相关对象Router和RouterLink作用一样，都是导航。Router是在Controller中用的，RouterLink是在模版中用到。二、路由对象的位置1、Routes对象配置在模块中。Routes由一组配置信息组成，每个配置信息至少包含两个属性，Path和Component。2、RouterOutlet在模版中3、RouterLink指令... 继续阅读 >

2021
07-09

详解Angular组件之投影

目录概述一、简单例子1、子组件中使用<ng-content>指令来标记投影点2、父组件中把要投影到子组件的投影点的html片段写到子组件的标签中二、多个<ng-content>投影点三、Angular属性绑定的方式插入html四、对比ngContent指令和属性绑定innerHTML方式概述运行时动态改变组件模版的内容。没路由那么复杂，只是一段html，没有业务逻辑。ngContent指令将父组件模版上的任意片段投影到子组件上。一、简单例子1、子组件中使用<ng-content>... 继续阅读 >

2021
07-09

详解Angular组件之生命周期(二)

目录一、view钩子1、实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项2、在一个变更检测周期中禁止一个视图被组装好之后再去更新视图二、content钩子1、Content钩子的调用顺序例子2、Content钩子中可以修改模版内容三、总结一、view钩子view钩子有2个，ngAfterViewInit和ngAfterViewChecked钩子。1、实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项以父组件调用子组件方法中例子为基础，在父组件中实现ngAfterViewI... 继续阅读 >

2021
07-09

详解Angular组件生命周期(一)

目录概述一、钩子的调用顺序二、onChanges钩子三、变更检测机制和DoCheck()钩子概述组件声明周期以及angular的变化发现机制红色方法只执行一次。变更检测执行的绿色方法和和组件初始化阶段执行的绿色方法是一个方法。总共9个方法。每个钩子都是@angular/core库里定义的接口。import{Component,OnInit}from'@angular/core';@Component({selector:'app-life',templateUrl:'./life.component.html',styleUrls:['./life... 继续阅读 >

2021
07-09

详解Angular组件之中间人模式

目录一、中间人模式二、例子1、报价组件上加购买按钮2、父组件接收处理事件3、下单组件4、运行结果三、使用服务作为中间人一、中间人模式该组件树中除了组件1以外，每个组件都有一个父组件可以扮演中间人的角色。顶级的中间人是组件1，它可以使组件2，组件3，组件6之间互相通讯。依次类推，组件2是组件4和组件5的中间人。组件3是组件7和组件8的中间人。中间人负责从一个组件接收数据并将其传递给另一个组件。二、例子股票报价组件... 继续阅读 >

2021
07-09

详解Angular父子组件通讯

目录概述一、输入输出属性概述二、输入属性三、属性绑定是单向的，从父组件到子组件四、输出属性1、先模拟一个实时变动的IBM的股票价格2、把信息输出出去，告诉组件外部，谁感兴趣谁来订阅3、在父组件中接收报价信息并显示总结概述Angular组件间通讯组件树，1号是根组件AppComponent。组件之间松耦合，组件之间知道的越少越好。组件4里面点击按钮，触发组件5的初始化逻辑。传统做法：在按钮4的点击事件里调用组件5的方法。紧密耦合... 继续阅读 >

2021
07-09

详解Angular结构型指令模块和样式

目录一，结构型指令二，模块Module写一个forRoot()三，风格定义使用ngStyle在拖拽的时候调整顺序一，结构型指令*是一个语法糖,<a*ngIf="user.login">退出</a>相当于<ng-template[ngIf]="user.login"><a>退出</a></ng-template>避免了写ng-template。<ng-template[ngIf]="item.reminder"><mat-icon>alarm</mat-icon></ng-template><!--<mat-icon*ngIf="item.reminder">alarm</mat-... 继续阅读 >

2021
07-09

详解Angular路由动画及高阶动画函数

目录一、路由动画二、Group三、Query&Stagger一、路由动画路由动画需要在host元数据中指定触发器。动画注意不要过多，否则适得其反。内容优先，引导用户去注意到某个内容。动画只是辅助手段。在router.animate.ts中定义一个进场动画，一个离场动画。因为进场动画和离场动画用的特别频繁，有一个别名叫:enter和:leave。import{trigger,state,transition,style,animate}from'@angular/animations';exportconstslideToRig... 继续阅读 >

2021
07-09

详解Angular动态组件

目录使用场景怎么实现一、动态组件放在哪二、怎么获取组件的实例使用场景我们先明确下动态组件的使用场景，在代码运行时要动态加载组件，换成普通人话，代码需要根据具体情况（比如用户的操作，向后台请求结果）确定在某些地方加载某些组件，这些组件不是静态的（不是固定的）。官网的举例就是，构建动态广告条，广告组件不断会推出新的，再用只支持静态组件结构的模板显然是不现实的。再举一个常见的例子，动态弹出框，弹出的组件... 继续阅读 >