使用自定义指令更改段落标记的背景色不适用于6号角。
@CustomDirective
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>
@ app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Signup_Component } from './signup/signup.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { StartModule } from './start/start.module'; *Module created
@NgModule({
declarations: [
AppComponent,
Signup_Component,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
StartModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
答案 0 :(得分:0)
您应该首先导出声明了指令的模块,然后将其导入到要使用的任何地方
@NgModule({
imports: [
CommonModule
],
exports:[StepsDirective]
declarations: [StepsDirective]
})
export class StartModule { }