import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DirectiveTest01Directive } from './test/directive-test01.directive'; import { SharedModule } from '../shared/shared.module'; import { DirectiveTest02Directive } from './test/directive-test02.directive'; @NgModule({ imports: [ CommonModule ], declarations: [ DirectiveTest01Directive, DirectiveTest02Directive], exports: [ DirectiveTest01Directive, DirectiveTest02Directive ] }) export class DirectiveModule { }
4.1.4 将自定义指令模块导入到需要用到指定指令的组件所在的模块中
技巧01:自定义指令一般会被多次用到,所以一般会将自定义指令模块导入到共享模块在从共享模块导出,这样其它模块只需要导入共享模块就可以啦
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule, MdCardModule, MdInputModule, MdRadioModule, MdRadioButton } from '@angular/material'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { DirectiveModule } from '../directive/directive.module'; @NgModule({ imports: [ CommonModule, RouterModule, FormsModule, ReactiveFormsModule, HttpModule, MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule, MdCardModule, MdInputModule, DirectiveModule, MdRadioModule ], declarations: [], exports: [ CommonModule, RouterModule, FormsModule, ReactiveFormsModule, HttpModule, MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule, MdCardModule, MdInputModule, DirectiveModule, MdRadioButton ] }) export class SharedModule { }
4.1.5 在组件中使用自定组件对应的选择器即可
自定义指令的选择器是由@Directive装饰器的selector元数据指定的
在元素中直接标注自定义指令的选择器就行啦
<div class="panel panel-primary"> <div class="panel panel-heading">实现自定义属性指令</div> <div class="panel-body"> <button md-raised-button appDirectiveTest02>实现自定义指令的按钮</button> <br /><br /> <button md-raised-button>未实现自定以指令的按钮</button> </div> <div class="panel-footer">2018-1-20 22:47:06</div> </div>
内容版权声明:除非注明,否则皆为本站原创文章。