<强> & # 65279;本系列教程的开发环境及开发语言:
<李>角4 +
<李>角CLI李
<李> 手稿
<>强基础知识
角CLI基本使用
安装角CLI(可选)
npm安装- g @angular/cli
创建新的项目
ng新项目名称
之前
启动本地服务器
cd项目名称
ng服务
<>强角指令简介
角的指令分为三种:
<李>组件指令(组件):用于构建UI组件,继承于指令类李
<李>属性指令(属性指示):用于改变组件的外观或行为李
<李>结构指令(结构指令):用于动态添加或删除DOM元素来改变DOM布局李
角指令分类图
角组件组成图
<强>第一节——创建指令
在角中,我们可以使用<代码> HostBinding 装饰器,实现元素的属性绑定。
<强>指令的作用
该指令用于演示如何利用<代码> HostBinding 装饰器,设置元素的<代码> innerText>
<强>指令的实现
从“@angular进口{指令,HostBinding}/核心”;
@Directive ({
选择器:“[问]”
})
出口类GreetDirective {
@HostBinding () innerText=实现“大家好!”;
}
指令的应用
从“@angular进口{组件}/核心”;
@ component ({
选择器:“app-root”,
模板:
& lt; h3>你好,Angular
& lt; h3 greet>你好,Angular
”,
})
出口类AppComponent {}
之前
<强>第二节——定义输入属性
为了能够让用户自定义<代码> GreetDirective> 输入装饰器去定义指令的输入属性。
<强>指令的作用
该指令用于演示如何利用<代码>输入装饰器,定义指令的输入属性,从而实现让用户自定义问候内容。
<强>指令的实现
从“进口输入}{指令、HostBinding @angular/核心”;
@Directive ({
选择器:“[问]”
})
出口类GreetDirective {
@Input()问:字符串;
@HostBinding()得到innerText(){实现
返回this.greet;
}
}
之前
<强>指令的应用
从“@angular进口{组件}/核心”;
@ component ({
选择器:“app-root”,
模板:
& lt; h3>你好,Angular
& lt; h3[问]="你好,Semlinker !”祝辞你好,Angular
”,
})
出口类AppComponent {}
之前
<强>第三节——事件处理
在角中,我们可以使用<代码> HostListener 属性装饰器,实现元素的事件绑定。
<强>指令的作用
该指令用于演示如何利用<代码> HostListener 装饰器,监听用户的点击事件。
<强>指令的实现
进口{指令,HostBinding、HostListener、输入}' @angular/核心”;
@Directive ({
选择器:“[问]”
})
出口类GreetDirective {
@Input()问:字符串;
@HostBinding()得到innerText(){实现
返回this.greet;
}
@HostListener('点击',' $事件'])>
从“@angular进口{组件}/核心”;
@ component ({
选择器:“app-root”,
模板:
& lt; h3>你好,Angular
& lt; h3[问]="你好,Semlinker !”祝辞你好,Angular
”,
})
出口类AppComponent {}
之前
<强>第四节——获取宿主元素属性值
在角中,我们可以通过<代码>属性> 角4指令快速入门教程
