Angular6 自定义指令不适用于angular 6:
使用自定义指令更改段落标记的背景颜色不适用于angular 6 @自定义指令Angular6 自定义指令不适用于angular 6:,angular6,Angular6,使用自定义指令更改段落标记的背景颜色不适用于angular 6 @自定义指令 import { Directive,ElementRef,HostListener } from '@angular/core'; @Directive({ selector: '[appSteps]' }) export class StepsDirective { constructor(private elementref: ElementRef){ } @HostListener('mous
import { Directive,ElementRef,HostListener } from '@angular/core';
@Directive({
selector: '[appSteps]'
})
export class StepsDirective {
constructor(private elementref: ElementRef){ }
@HostListener('mouseenter')onmouseenter()
{
this.elementref.nativeElement.style.backgroundColor = 'yellow';
}
@HostListener('mouseleave')onmouseleave()
{
this.elementref.nativeElement.style.backgroundColor = 'null';
}
}
@ModuleCreated:在此处添加了我的指令,并在appmodule.ts中使用此模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {StepsDirective} from '../steps.directive';
@NgModule({
imports: [
CommonModule
],
declarations: [StepsDirective]
})
export class StartModule { }
@AppComponent.html—在标记上托管我的自定义指令
<p appSteps>My Hero Academia</p>
您应该首先导出您在其中声明指令的模块,然后将其导入到您想要使用的任何位置
@NgModule({
imports: [
CommonModule
],
exports:[StepsDirective]
declarations: [StepsDirective]
})
export class StartModule { }
@NgModule({
imports: [
CommonModule
],
exports:[StepsDirective]
declarations: [StepsDirective]
})
export class StartModule { }