angular常用组件,简述angularjs中模块的作用

　　本文带你认识angular中的指令，介绍三种类型的指令：组件指令、结构指令和属性指令。希望对你有帮助！

　　Angular中有三种类型的指令：

　　组件型指令——组件比较特殊，有模板结构指令——通过添加和删除DOM元素来改变DOM布局的指令。常用的有：*ngIf，*ngFor，ngSwitch属性指令——改变元素、组件外观和行为的指令或其他指令。常用的有：NgClass，NgStyle【相关教程推荐：《angular教程》】

　　组件型指令

　　当查看angular源代码时，您将看到以下内容

　　所以组件继承了指令，但是它是特殊的，有一个模板。

　　同样，由于组件继承了指令，下面的一系列属性和结构指令的操作都可以在组件中实现。

　　但是因为指令的目的是复用，所以这个操作在组件中无法达到这个目的，所以强烈不推荐。

　　属性型指令

　　上面提到的属性指令用于改变元素、组件或其他指令的外观和行为。

　　那么我们如何创建自己的属性指令呢？

　　首先，创建指令很像创建组件。

　　导入指令decorator导入符号Input、TemplateRef和ViewContainerRef，根据指令类型和要求选择向指令类添加decorator。设置CSS属性选择器以标识此指令应该应用于模板中的哪个元素。自定义属性型指令

　　1.创建属性指令appHighlight指令：highlight.directive.ts

　　//1，导入指令装饰器

　　//3.导入ElementRef。ref的nativeElement属性提供对宿主DOM元素的直接访问。

　　从“@angular/core”导入{ Directive，element ref }；

　　//2.@Directive () decorator的选择器属性指定指令的CSS属性选择器[appHighlight]。

　　@指令({

　　选择器：“[appHighlight]”

　　})

　　导出类HighlightDirective {

　　//4.构造函数使用ElementRef注入宿主DOM元素的引用。

　　构造函数(el: ElementRef) {

　　//将相应元素的背景色设置为黄色

　　El . native element . style . background color= yellow ；

　　}

　　}2.主体元素的使用

　　p appHighlightHighlight突出显示我！/p处理用户事件

　　以下指令的功能是：

　　可以接收两个参数，其中一个是另一个的默认值。

　　监控主机元素的鼠标进出事件，进入时主机的背景色就是上面传入的值。

　　从“@angular/core”导入{ Directive，ElementRef，HostListener，Input }；

　　@指令({

　　//指定指令的属性选择器

　　选择器：“[appHighlight]”

　　})

　　导出类HighlightDirective {

　　@ Input( app highlight )highlight color:string；

　　@ Input()default color:string；

　　//ElementRef在构造函数中用于注入宿主DOM元素的引用。

　　构造函数(私有el: ElementRef) { }

　　//侦听宿主元素mousenter事件

　　@ host listener( mouse enter )on mouse enter(){

　　this . highlight(this . highlight color this . default color)；

　　}

　　//侦听宿主元素mouseleave事件

　　@ host listener( mouse leave )onmouse leave(){

　　this.highlight(空)；

　　}

　　//修改背景颜色

　　私有高亮显示(颜色：字符串){

　　//ElementRef提供通过其nativeElement属性直接访问宿主DOM元素的能力。

　　this . El . native element . style . background color=color；

　　}

　　}主体元素用法

　　app highlight= red default color= black 主机元素/p结构型指令

　　结构指令的职责是HTML布局。它们塑造或重新塑造DOM的结构，这通常是通过添加、删除和操作它们所附加的宿主元素来实现的。

　　常见的内置结构指令：

　　NgIf ——从模板创建或销毁子视图。NgFor ——为列表中的每个条目重复呈现一个节点。NgSwitch ——在待机视图之间切换的一组指令。具体方法见官网自定义结构性指令。

　　效果是：

　　如果条件是假值，并且有角的以前尚未创建视图，则此作曲者会导致视图容器从模板创建出嵌入式视图。如果条件为真值，并且当前正显示着视图，则此作曲者会清除容器，这会导致销毁该视图。

　　1、创建指令分时（同分时)文件：除非。指令. ts

　　//1、导入输入、模板参考和ViewContainerRef

　　从" @角度/核心"导入{ Directive，Input，TemplateRef，ViewContainerRef }。

　　//2、添加管理的装饰器

　　@指令({选择器：[app until] })

　　导出类除非有指令{

　　private hasView=false

　　//3、在指令的构造函数中将模板参考和ViewContainerRef注入成私有变量。

　　构造器（

　　private templateRef:TemplateRefany，

　　私有viewContainer: ViewContainerRef

　　) { }

　　//4、添加一个带作曲者的@Input()属性应用除非

　　@ Input()set app除非(条件：布尔){

　　//如果条件是假值，并且有角的以前尚未创建视图，则此作曲者会导致视图容器从模板创建出嵌入式视图。

　　如果(!条件！this.hasView) {

　　这个。查看容器。创建嵌入式视图(this。template ref)；

　　这个。has view=true

　　} else if(以此为条件。有视图){

　　//如果条件为真值，并且当前正显示着视图，则清除容器，这会导致销毁该视图。

　　这个。查看容器。clear()；

　　这个。has view=false

　　}

　　}

　　}2、测试指令

　　p *除非=condition 显示这句话，除非条件为真100元/人例如*ngIf

　　div * ngIf= hero class= name { hero。name } }/div会被转换为

　　尼日利亚模板[ngIf]=英雄

　　div class= name"{ hero。name } }/div

　　/ng-模板角度不会创建真正的尼日利亚模板元素，只会将p和注释节点占位符渲染到数字正射影像图中

　　自定义指令例详

　　下面的指令会去掉投入输入框中的所有空格

　　从" @角度/核心"导入{组件，指令，HostListener }

　　从" @ angular/core/src/render 3/instructions "导入{宿主元素}；

　　从" @angular/forms "导入{ FormGroup，FormControl，验证器，NgControl }

　　@组件({

　　选择器："应用程序测试",

　　templateUrl:“”./test.component.html ，

　　//声明：[测试指令]

　　})

　　导出类测试组件{

　　构造函数(){}

　　ngOninit() {}

　　名字="";

　　姓氏="";

　　profileForm=新表单组({

　　firstName: new FormControl(aa ，[Validators.required，Validators。模式([阿扎-Z0-9]* )，

　　姓氏：新的FormControl( ，Validators.required)，

　　});

　　onchange(事件){

　　console.log(触发了onchange ，this.firstName)

　　}

　　}

　　@指令({

　　选择器："[testDirective]"，

　　//主机：{

　　//要传递传递事件参数，使用这种方法，不用的可以使用下面的@HostListener方法

　　//(keyup): onkeyup($event)，

　　//}

　　})

　　导出类测试指令{

　　构造函数（公共ngControl: NgControl) {}

　　ngOnInit() {}

　　//onkeyup(事件){

　　@ host listener( keyup )onkeyup(event){

　　//console.log(event ，event)//事件参数

　　console.log(this.ngControl)

　　控制台。日志(这个。ng控制。控制)

　　控制台。日志(这个。ng控制。控制。值)

　　if(/\ s/g . test(this。ng控制。控制。值)){

　　//只读属性，要通过设定值修改

　　//这个。ng控制。控制。价值=这个。ng控制。控制。价值。替换(/\ s/g，)

　　这个。ng控制。控制。setvalue(这个。ng控制。控制。价值。替换(/\ s/g，))

　　}

　　}

　　}使用：

　　表单操作= [表单组]=profileForm

　　标签

　　名字：输入type= text 测试指令表单控件名称=名字[(ng模型)]=名字(ngModelChange)= onchange($ event)

　　/标签

　　标签

　　姓氏：输入type= text 测试指令表单控件名称=姓氏

　　/标签

　　按钮类型=提交[禁用]=!profileForm.valid "提交/按钮

　　/表单使用效果

　　上面输入的初始值是aa，中间输入一个空格字符，先触发onchange事件，然后在指令中触发keyup事件，修改firstName的值，然后再次触发onchange事件，这样change事件一共触发了两次。

　　有关编程的更多信息，请访问：编程入门！这就是angular中三类指令的细节：组件类型、结构类型和属性类型。请多关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。