关于Angular directive使用的语法问题

简介: 前者用于控制或者改变 DOM,后者控制已有 elements 的外观或者行为。

image.png

import {
  AfterViewInit,
  Component,
  Directive,
  Input,
  OnInit
} from "@angular/core";
@Directive({
  selector: "[cxFocus]"
})
export class FocusDirective implements OnInit, AfterViewInit {
  @Input("cxFocus") public config: string;
  @Input() set cxRefreshFocusOn(_switchCondition: string) {
    console.log("Jerry new value: " + _switchCondition);
  }
  constructor() {
    console.log("Jerry directive constructor");
  }
  ngAfterViewInit(): void {
    console.log("Jerry directive in ngOnInit: " + this.config);
  }
  ngOnInit(): void {
    console.log("Jerry directive in ngOnInit: " + this.config);
  }
}
@Component({
  selector: "app-root",
  template: `
    <div [cxFocus]="jerry">Hello</div>
    <div cxFocus="Jerry config">World</div>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  jerry = "Jerry Hello";
}

运行时输出:

image.png

image.png

image.png


相关文章
|
5月前
Angular启动/node_modules/@types/node/index.d.ts (20,1): Invalid ‘reference‘ directive syntax.
Angular启动/node_modules/@types/node/index.d.ts (20,1): Invalid ‘reference‘ directive syntax.
59 2
从 Angular Component 和 Directive 的实例化,谈谈 Angular forRoot 方法的命令由来
同 Angular service 的单例特性不同,Angular 组件和指令通常会被多次实例化,比如 HTML markup 中每出现一次 Component 的 selector,就会触发 Component 的一次实例化。
|
JavaScript
Angular1.x的自定义指令directive参数配置详细说明
Angular1.x的自定义指令directive参数配置详细说明
关于调用 Angular 属性指令 attribute Directive 是否需要带中括号的问题
关于调用 Angular 属性指令 attribute Directive 是否需要带中括号的问题
148 0
关于调用 Angular 属性指令 attribute Directive 是否需要带中括号的问题
|
JavaScript
利用 Angular Directive 和 @HostBinding 实现输入文本框随着键盘输入自动变色效果
利用 Angular Directive 和 @HostBinding 实现输入文本框随着键盘输入自动变色效果
利用 Angular Directive 和 @HostBinding 实现输入文本框随着键盘输入自动变色效果
一个关于Angular Directive selector里的中括号使用问题
一个关于Angular Directive selector里的中括号使用问题
一个关于Angular Directive selector里的中括号使用问题
Angular jasmine fixture.detectChanges如何触发directive的set方法
Angular jasmine fixture.detectChanges如何触发directive的set方法
104 0
Angular jasmine fixture.detectChanges如何触发directive的set方法
每个施加在HTML元素上的Angular Directive,运行时都会生成一个新的实例
每个施加在HTML元素上的Angular Directive,运行时都会生成一个新的实例
94 0
每个施加在HTML元素上的Angular Directive,运行时都会生成一个新的实例
如何找到Angular应用的某个directive是属于哪一个Angular module
如何找到Angular应用的某个directive是属于哪一个Angular module
107 0
如何找到Angular应用的某个directive是属于哪一个Angular module
Angular里的structural directive的一个例子
Angular里的structural directive的一个例子
Angular里的structural directive的一个例子
下一篇
无影云桌面