Есть ли простой способ перезаписать базовую директиву? - PullRequest
Новая
       36

Есть ли простой способ перезаписать базовую директиву?

0 голосов
/ 28 декабря 2018

Я ищу простой способ переписать поведение директив, предоставляемых «из коробки», например, ngIf

Таким образом, я могу создать дочернюю директиву и расширить поведение и после объявить ее как нативную..

PS: я знаю, что перезапись стандартной функциональности - ОЧЕНЬ ПЛОХАЯ практика, но я делаю это только для целей исследования / исследования.

Ответы [ 3 ]

0 голосов
/ 31 декабря 2018

Если вы хотите расширить уже предоставленное поведение, это можно сделать довольно легко.Вам просто нужно создать свою пользовательскую директиву и использовать селектор, например, [ngIf].

Но элемент, на котором вы использовали директиву, все еще связан с исходной ngIf.Таким образом, вы не получите красивое и чистое решение, чтобы избавиться от исходного поведения.Вы можете увидеть пример на stackblitz

Чтобы действительно переопределить, есть эти решения, которые могут быть как-то полезны, а не взломать

  1. Переопределите / расширите директиву самостоятельно и импортируйте ее в модуль вместо исходного

    • в случае ngIf, что будет означать создание пользовательского CommonModule, который предоставляет эту директиву из углового ядра

  2. Используйте «скорректированную» вилку угловых

  3. Используйте регулярное выражение, чтобы найти все вхождения требуемой директивы (например, ngIf) и замените его произвольным именем, которое вы можете легко использовать в селекторе ([myNgIf])

0 голосов
/ 31 декабря 2018

Вы можете просто определить селектор как одну из существующих директив.Проверьте мой пример на stackblitz.

https://stackblitz.com/edit/angular-overload-builtin-directive

0 голосов
/ 28 декабря 2018

вы можете написать свой собственный ngIf, например, myIf 

import { Directive, Input, ElementRef, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[myIf]'
})
export class MyIfDirective {

  constructor(
    private element: ElementRef,
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {
  }

  @Input()
  set myIf(val) {
    if(val) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

затем 

<div *myIf="isVisible">
    Hi there!
</div>

, иначе это поможет 

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import {NgIf} from "@angular/common"

@Directive({
  selector: '[ngIf][myNgIf]'
})
export class myNgIf extends NgIf {

  @Input() myNgIf: boolean;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) {

    super(viewContainer, templateRef);
  }


  @Input()
  set ngIf(val) {
    if (val) {
      ...
    } else {
      this.viewContainer.clear();
    }
  }
...