Учебники

Угловой 4 — Директивы

Декабрь 11, 2018

Директивы в Angular — это класс js , который объявлен как @directive . У нас есть 3 директивы в Angular. Директивы перечислены ниже —

Директивы по компонентам

Они формируют основной класс, имеющий детали того, как компонент должен обрабатываться, создаваться и использоваться во время выполнения.

Структурные директивы

Структурная директива в основном касается манипулирования элементами dom. Структурные директивы имеют знак * перед директивой. Например, * ngIf и * ngFor .

Директивы атрибутов

Директивы атрибутов имеют дело с изменением внешнего вида и поведения элемента dom. Вы можете создавать свои собственные директивы, как показано ниже.

Как создать пользовательские директивы?

В этом разделе мы обсудим пользовательские директивы, которые будут использоваться в компонентах. Пользовательские директивы созданы нами и не являются стандартными.

Давайте посмотрим, как создать пользовательскую директиву. Мы создадим директиву, используя командную строку. Команда для создания директивы с использованием командной строки — 

ng g directive nameofthedirective

e.g

ng g directive changeText

Вот как это выглядит в командной строке 

C:\projectA4\Angular 4-app>ng g directive changeText
installing directive
   create src\app\change-text.directive.spec.ts
   create src\app\change-text.directive.ts
   update src\app\app.module.ts

Приведенные выше файлы, т. Е. Change-text.directive.spec.ts и change-text.directive.ts, будут созданы, а файл app.module.ts обновлен.

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

   imports: [
      BrowserModule
   ],

   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

Класс ChangeTextDirective включен в объявления в приведенном выше файле. Класс также импортируется из файла, указанного ниже.

изменить-текст. директива 

import { Directive } from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor() { }
}

Приведенный выше файл имеет директиву и свойство селектора. Что бы мы ни определяли в селекторе, то же самое должно совпадать в представлении, где мы назначаем пользовательскую директиву.

В представлении app.component.html добавим директиву следующим образом: 

<div style="text-align:center">
   <span changeText >Welcome to {{title}}.</span>
</div>

Мы запишем изменения в файле change-text.directive.ts следующим образом:

Сменный text.directive.ts 

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText="Text is changed by changeText Directive. ";
   }
}

В приведенном выше файле есть класс ChangeTextDirective и конструктор, который принимает элемент типа ElementRef , который является обязательным. Элемент содержит все детали, к которым применяется директива Change Text .

Мы добавили элемент console.log . Вывод же можно увидеть в консоли браузера. Текст элемента также изменяется, как показано выше.

Теперь браузер покажет следующее.

47
Share: