кто-нибудь создал какую-либо образец Angular Directive с помощью @Directive
decorator? Я много искал, но все разработчики до сих пор создали директивы компонентов. Даже Angular Обзор API больше не говорит об этом.
Angular Директива
Ответ 1
Простая директива-демонстрация. Это очень простой пример, начинающийся с директивы angular2.
У меня есть компонент и директива.
Я использую директиву для обновления вида компонента. Кроме того, директива changeColor function вызывается с помощью функции компонента changeColor.
Компонент
@Component({
selector: 'my-app',
host: {'[style.backgroundColor]':'color',}
template: `
<input type="text" [(ngModel)]="color" (blur)="changeColor(color)" />
<br>
<span > (span) I'm {{color}} color <span>
<div mySelectedColor [selectedColor]="color"> (div) I'm {{color}} color </div>
`,
directives: [selectedColorDirective]
})
export class AppComponent implements AfterViewInit{
@ViewChild(selectedColorDirective) myDirective: selectedColorDirective;
color:string;
constructor(el:ElementRef,renderer:Renderer) {
this.color="Yellow";
//renderer.setElementStyle(el, 'backgroundColor', this.color);
}
changeColor(color)
{
this.myDirective.changeColor(this.color);
}
ngAfterViewInit() { }
}
Директива
@Directive({
selector:"[mySelectedColor]",
host: {
// '(keyup)': 'changeColor()',
// '[style.color]': 'selectedColor',
}
})
export class selectedColorDirective {
@Input() selectedColor: string = '';
constructor(el: ElementRef, renderer: Renderer) {
this.el=el;
this.el.nativeElement.style.backgroundColor = 'pink';
// renderer.setElementStyle(el, 'backgroundColor', this.selectedColor);
}
changeColor(clr)
{
console.log('changeColor called ' + clr);
//console.log(this.el.nativeElement);
this.el.nativeElement.style.backgroundColor = clr;
}
}
Ответ 2
В простых условиях
Директива по компонентам - это ваши директивы с шаблоном, которые мы используем при создании приложения → в вашем html → <custom-tag></custom-tag>
@Component({
selector : 'custom-tag',
template : '<p> My Custom Tag</p>'
})
Структурная директива - это те, которые изменяют DOM, удаляя добавление элементов. Пример:
<div *ngIf="showErrorMessage">{{errorMessage}}</div>
ngIf добавит div, если true else удалит, если он изменится на false.
Наконец, есть Директива атрибутов, имя говорит все. Директива 'based based' Пример:
<input type="text" pPassword />
@Directive({
selector: '[pPassword]'
})
Ответ 3
Существует три вида директив Angular:
Components
Attribute directives
Structural directives
Angular2 Руководство по атрибутам атрибутов Код: https://github.com/guyoung/GyPractice-Angular2/tree/master/apps/attribute-directives
Angular2 Руководство по структурным директивам Код: https://github.com/guyoung/GyPractice-Angular2/tree/master/apps/structural-directives
Ответ 4
Вот примерная директива. Это добавляет прослушиватель событий для кликов, сделанных вне компонента.
import {Directive, ElementRef, HostListener, EventEmitter, Output} from '@angular/core';
@Directive({
selector: '[clickedOutside]'
})
export class ClickedOutsideDirective {
@Output()
public clickedOutside = new EventEmitter();
constructor(private _elemRef: ElementRef) {
}
@HostListener('document:click', ['$event'])
public onClick(event) {
const targetElement = event.target;
if (!targetElement) {
return;
}
/**
* In case the target element which was present inside the referred element
* is removed from the DOM before this method is called, then clickedInside
* will be false even if the clicked element was inside the ref Element. So
* if you don't want this behaviour then use [hidden] instead of *ngIf
*/
const clickedInside = this._elemRef.nativeElement.contains(targetElement);
if (!clickedInside && !this._elemRef.nativeElement.isSameNode(targetElement)) {
return this.clickedOutside.emit(event);
}
}
}
Это можно использовать следующим образом:
<app-comp (clickedOutside)='close()'></app-comp>
close
будет срабатывать всякий раз, когда кто-то нажимает app-comp
Ответ 5
В соответствии с документами Angular2 директивы используются для изменения поведения элемента DOM.
Давайте создадим одну директиву, которая изменит цвет фона div на красный в случае mouseenter и желтый в случае mouseleave.
Шаг 1. Создание компонента
import {Component} from '@angular/core';
@Component({
selector: 'my-comp',
template: '<div colorFlip>This is just a Demo!</div>'
})
export class MyComp {}
Шаг 2: Создать директиву
import {Directive, HostListener, ElementRef} from '@angular/core';
@Directive({
selector: '[colorFlip]'
})
export class ColorFlip {
constructor(private el: ElementRef) {}
@HostListener('mouseenter') handleMouseEnter() {
this.flipColor('red');
}
@HostListener('mouseleave') handleMouseEnter() {
this.flipColor('yellow');
}
flipColor(color:string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
Шаг 3: Директива регистрации
@NgModule({
imports: [...],
declarations: [MyComp , ColorFlip ]
})