组件指令
结构指令
属性指令
属性指令 | 结构指令 |
属性指令看起来像普通的HTML属性,主要用于数据绑定和事件绑定。 | 结构指令以*符号开头,外观有所不同。 |
属性指令仅影响添加到它们的元素。 | 结构指令会影响DOM中的整个区域。 |
import {Directive, ElementRef, OnInit} from '@angular/core';
@Directive( {
selector: '[appSimpleStyle]'
})
export class SimpleStyleDirective implements OnInit {
constructor(private elementRef: ElementRef) {
}
ngOnInit() {
this.elementRef.nativeElement.style.backgroundColor = 'green';
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {SimpleStyleDirective} from './simple-style/simple-style.directive';
@NgModule({
declarations: [
AppComponent,
SimpleStyleDirective
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }