angular directive 自定义指令--属性方式简单学习
<p><span style="font-size: 16px"><strong>1. 自定义指令 - @directive</strong></span></p><p> </p>
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div><span style="color: rgba(152, 114, 162, 1)">import<span style="color: rgba(197, 200, 198, 1)"> { <span style="color: rgba(96, 137, 180, 1)">Component<span style="color: rgba(197, 200, 198, 1)">, <span style="color: rgba(96, 137, 180, 1)">Directive<span style="color: rgba(197, 200, 198, 1)">, <span style="color: rgba(96, 137, 180, 1)">HostListener<span style="color: rgba(197, 200, 198, 1)">, <span style="color: rgba(96, 137, 180, 1)">ElementRef<span style="color: rgba(197, 200, 198, 1)"> } <span style="color: rgba(152, 114, 162, 1)">from<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'@angular/core'</span></span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)">@<span style="color: rgba(206, 103, 0, 1)">Directive<span style="color: rgba(197, 200, 198, 1)">({</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> selector: <span style="color: rgba(154, 168, 58, 1)">''<span style="color: rgba(197, 200, 198, 1)">,</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> host: {</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'(keyup)'<span style="color: rgba(197, 200, 198, 1)">: <span style="color: rgba(154, 168, 58, 1)">'keyUpFunc($event.target)'<span style="color: rgba(197, 200, 198, 1)">,</span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'(click)'<span style="color: rgba(197, 200, 198, 1)">: <span style="color: rgba(154, 168, 58, 1)">'onClick($event.target)'<span style="color: rgba(197, 200, 198, 1)">,</span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'role-data'<span style="color: rgba(197, 200, 198, 1)">: <span style="color: rgba(154, 168, 58, 1)">'input-trim'</span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> }</span></div>
<div><span style="color: rgba(197, 200, 198, 1)">})</span></div>
<div><span style="color: rgba(152, 114, 162, 1)">export<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">class<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(155, 0, 0, 1)">InputTrimDirective<span style="color: rgba(197, 200, 198, 1)"> {</span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">private<span style="color: rgba(197, 200, 198, 1)"> _elementRef<span style="color: rgba(103, 104, 103, 1)">:<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(155, 0, 0, 1)">ElementRef</span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">constructor<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(96, 137, 180, 1)">_elementRef<span style="color: rgba(103, 104, 103, 1)">:<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(155, 0, 0, 1)">ElementRef<span style="color: rgba(197, 200, 198, 1)">) {</span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(199, 68, 74, 1)">console<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(152, 114, 162, 1)">log<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(96, 137, 180, 1)">_elementRef<span style="color: rgba(197, 200, 198, 1)">, <span style="color: rgba(154, 168, 58, 1)">"获取挂载属性的DOM"<span style="color: rgba(197, 200, 198, 1)">)</span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(199, 68, 74, 1)">this<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(152, 114, 162, 1)">_elementRef<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(103, 104, 103, 1)">=<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)">_elementRef</span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> }</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 155, 153, 1)">/**</span></span></div>
<div><span style="color: rgba(154, 155, 153, 1)"> * 是属性装饰器，用来为宿主元素添加事件监,类似于我们原生JavaScript的addEventListener</span></div>
<div><span style="color: rgba(154, 155, 153, 1)"> @HostListener这里我们监听了keyup事件(可以定义原生JavaScript中的其他事件),</span></div>
<div><span style="color: rgba(154, 155, 153, 1)"> 当表单中有输入的时候我们就会调用方法，传递了一个$event对象进去，后面紧跟我们触法keyup事件的方法体</span></div>
<div><span style="color: rgba(154, 155, 153, 1)"> 可以用 <span style="color: rgba(152, 114, 162, 1)">@Component<span style="color: rgba(154, 155, 153, 1)"> 中的 host 代替</span></span></span></div>
<div><span style="color: rgba(154, 155, 153, 1)"> * */</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 155, 153, 1)">// @HostListener('keyup', ['$event.target'])</span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(206, 103, 0, 1)">keyUpFunc<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(96, 137, 180, 1)">evt<span style="color: rgba(197, 200, 198, 1)">) {</span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">if<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(96, 137, 180, 1)">evt<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(152, 114, 162, 1)">value<span style="color: rgba(197, 200, 198, 1)">) {</span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(199, 68, 74, 1)">this<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(96, 137, 180, 1)">_elementRef<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(96, 137, 180, 1)">nativeElement<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(152, 114, 162, 1)">value<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(103, 104, 103, 1)">=<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)">evt<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(152, 114, 162, 1)">value<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(103, 104, 103, 1)">+<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'_num'</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> }</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> }</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(206, 103, 0, 1)">onClick<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(96, 137, 180, 1)">evt<span style="color: rgba(197, 200, 198, 1)">) {</span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(199, 68, 74, 1)">console<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(152, 114, 162, 1)">log<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(96, 137, 180, 1)">evt<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(152, 114, 162, 1)">innerHTML<span style="color: rgba(197, 200, 198, 1)">, <span style="color: rgba(154, 168, 58, 1)">"click_div"<span style="color: rgba(197, 200, 198, 1)">)</span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">if<span style="color: rgba(197, 200, 198, 1)">(<span style="color: rgba(96, 137, 180, 1)">evt<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(152, 114, 162, 1)">innerHTML<span style="color: rgba(197, 200, 198, 1)">) {</span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(199, 68, 74, 1)">this<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(96, 137, 180, 1)">_elementRef<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(96, 137, 180, 1)">nativeElement<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(152, 114, 162, 1)">innerHTML<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(103, 104, 103, 1)">=<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)">evt<span style="color: rgba(197, 200, 198, 1)">.<span style="color: rgba(152, 114, 162, 1)">innerHTML<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(103, 104, 103, 1)">+<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'_num'</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> }</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> </span></div>
</div>
<p><span style="font-size: 16px"><strong>2. DOM 中使用 -- 属性方式使用</strong></span></p>
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div><span style="color: rgba(96, 137, 180, 1)"><div></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)"><h1><span style="color: rgba(197, 200, 198, 1)">指令---directive<span style="color: rgba(96, 137, 180, 1)"></h1></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)"><input<span style="color: rgba(208, 179, 68, 1)"> type=<span style="color: rgba(154, 168, 58, 1)">"text"<span style="color: rgba(208, 179, 68, 1)"> class=<span style="color: rgba(154, 168, 58, 1)">"input_1"<span style="color: rgba(208, 179, 68, 1)"> input-trim<span style="color: rgba(96, 137, 180, 1)">></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)"><div<span style="color: rgba(208, 179, 68, 1)"> class=<span style="color: rgba(154, 168, 58, 1)">"click_div"<span style="color: rgba(208, 179, 68, 1)"> input-trim<span style="color: rgba(96, 137, 180, 1)">><span style="color: rgba(197, 200, 198, 1)">sasas<span style="color: rgba(96, 137, 180, 1)"></div></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)"><input<span style="color: rgba(208, 179, 68, 1)"> type=<span style="color: rgba(154, 168, 58, 1)">"text"<span style="color: rgba(208, 179, 68, 1)"> class=<span style="color: rgba(154, 168, 58, 1)">"input_2"<span style="color: rgba(208, 179, 68, 1)"> role-data=<span style="color: rgba(154, 168, 58, 1)">'input-trim'<span style="color: rgba(96, 137, 180, 1)">></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(96, 137, 180, 1)"></div></span></div>
</div>
<p><span style="font-size: 16px"><strong>3. 在根模块中引用</strong></span></p>
<p> </p>
<div style="color: rgba(197, 200, 198, 1); line-height: 19px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: normal; white-space: pre; background-color: rgba(30, 30, 30, 1)">
<div><span style="color: rgba(152, 114, 162, 1)">import<span style="color: rgba(197, 200, 198, 1)"> { <span style="color: rgba(96, 137, 180, 1)">BrowserModule<span style="color: rgba(197, 200, 198, 1)"> } <span style="color: rgba(152, 114, 162, 1)">from<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'@angular/platform-browser'<span style="color: rgba(197, 200, 198, 1)">;</span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(152, 114, 162, 1)">import<span style="color: rgba(197, 200, 198, 1)"> { <span style="color: rgba(96, 137, 180, 1)">NgModule<span style="color: rgba(197, 200, 198, 1)"> } <span style="color: rgba(152, 114, 162, 1)">from<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'@angular/core'<span style="color: rgba(197, 200, 198, 1)">;</span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(152, 114, 162, 1)">import<span style="color: rgba(197, 200, 198, 1)"> { <span style="color: rgba(96, 137, 180, 1)">AppRoutingModule<span style="color: rgba(197, 200, 198, 1)"> } <span style="color: rgba(152, 114, 162, 1)">from<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'./app-routing.module'<span style="color: rgba(197, 200, 198, 1)">;</span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(152, 114, 162, 1)">import<span style="color: rgba(197, 200, 198, 1)"> { <span style="color: rgba(96, 137, 180, 1)">AppComponent<span style="color: rgba(197, 200, 198, 1)"> } <span style="color: rgba(152, 114, 162, 1)">from<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'./app.component'<span style="color: rgba(197, 200, 198, 1)">;</span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(152, 114, 162, 1)">import<span style="color: rgba(197, 200, 198, 1)"> { <span style="color: rgba(96, 137, 180, 1)">TemplateDirective<span style="color: rgba(197, 200, 198, 1)"> } <span style="color: rgba(152, 114, 162, 1)">from<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'./directive/template-directive.component'</span></span></span></span></span></span></span></div>
<div><span style="color: rgba(154, 155, 153, 1)">// 指令</span></div>
<div><span style="font-size: 14px; background-color: rgba(255, 102, 0, 1)"><strong><em><span style="color: rgba(152, 114, 162, 1)">import<span style="color: rgba(197, 200, 198, 1)"> { <span style="color: rgba(96, 137, 180, 1)">InputTrimDirective<span style="color: rgba(197, 200, 198, 1)"> } <span style="color: rgba(152, 114, 162, 1)">from<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 168, 58, 1)">'./directive/template-directive.component'</span></span></span></span></span></span></span></em></strong></span></div>
<div><span style="color: rgba(197, 200, 198, 1)">@<span style="color: rgba(206, 103, 0, 1)">NgModule<span style="color: rgba(197, 200, 198, 1)">({</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(154, 155, 153, 1)">// 引入组件，指令</span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> declarations: [</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)">AppComponent<span style="color: rgba(197, 200, 198, 1)">,</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)">TemplateDirective<span style="color: rgba(197, 200, 198, 1)">,</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <strong><em><span style="color: rgba(96, 137, 180, 1); background-color: rgba(255, 102, 0, 1)">InputTrimDirective</span></em></strong></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> ],</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> imports: [</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)">BrowserModule<span style="color: rgba(197, 200, 198, 1)">,</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(96, 137, 180, 1)">AppRoutingModule</span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> ],</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> providers: [],</span></div>
<div><span style="color: rgba(197, 200, 198, 1)"> bootstrap: [<span style="color: rgba(96, 137, 180, 1)">AppComponent<span style="color: rgba(197, 200, 198, 1)">]</span></span></span></div>
<div><span style="color: rgba(197, 200, 198, 1)">})</span></div>
<div><span style="color: rgba(152, 114, 162, 1)">export<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(152, 114, 162, 1)">class<span style="color: rgba(197, 200, 198, 1)"> <span style="color: rgba(155, 0, 0, 1)">AppModule<span style="color: rgba(197, 200, 198, 1)"> { }</span></span></span></span></span></span></div>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/monkey-K/p/11449528.html
頁:
[1]