角度7 |指令

Angular 7中的指令是Typescript类，使用装饰器@Directive声明。这些是文档对象模型(DOM)指令集，这些指令集决定如何完成逻辑实现。
Angular指令可以分为三种类型：

1. 组件指令：它构成主类，并由@Component声明。它包含有关组件处理，实例化和在运行时使用的详细信息。
   示例：它包含某些参数，本示例中显示了其中的一些参数。

javascript

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

1. 下面讨论了三个参数：
   • 选择器：告诉模板标记，该标记指定组件的开始和结束。
   • templateURL：包含用于组件的模板。
   • styleUrls：它是数组类型，由用于模板的所有样式格式文件组成。
2. 结构指令：结构指令操纵DOM元素。这些指令在指令之前带有*符号。例如，* ngIf和* ngFor。
   示例：让我们看一下* ng-if-else和* ng-for的实现。使用它们，我们对工作日和周末进行分类。
   组件文件：

javascript

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Weekdays:Array =[
'Sunday', 'Monday', 'Tuesday',
'Wednesday', 'Thursday', 'Friday', 'Saturday']
}

1. 模板文件：

html

  
{{day}} is a weekend


  
{{day}} is not a weekend

1. 输出：

2. 属性指令：属性指令用于更改DOM元素的外观和行为。它提供了创建我们自己的指令的工具。
   示例：此示例描述了如何制作我们自己的指令。
   编写命令如下：

ng g directive 

1. 指示：

javascript

import { Directive, ElementRef, OnInit } from '@angular/core';
 
@Directive({
  selector: '[appChanges]'
})
export class ChangesDirective {
  constructor(private eltRef: ElementRef) {
 
    // Changing the background to green
    this.eltRef.nativeElement.style.backgroundColor = 'green';
    this.eltRef.nativeElement.style.color = 'white';
    changing the text color to white
  }
   
  ngOnInit() {
  }
}

1. 组件文件：

javascript

import { Component, OnInit, Directive } from '@angular/core';
import { ChangesDirective } from '../changes.directive';
 
@Component({
  selector: 'app-derived-directive',
  templateUrl: './derived-directive.component.html',
  styleUrls: ['./derived-directive.component.css']
})
 
export class DerivedDirectiveComponent implements OnInit {
 
  isClicked:boolean=false;
  constructor() { }
  buttonClick(){
 
    // Change controlled by button press
    this.isClicked = true;
  }
  ngOnInit() {
  }
}

1. 模板

html

Click Here
  
    

        
GeeksForGeeks
    
 
 
    

        
 GeeksForGeeks
    

1. 输出：
   • 在单击按钮之前：

• 单击按钮后：