web-dev-qa-db-de.com

Angular 4 Aufrufanweisungsmethode von Komponente

ich versuche, eine strukturelle Direktive zu erstellen, die die übergeordnete DOM-Struktur entweder mithilfe ihres Selektors (statisch) oder durch Aufrufen ihrer öffentlichen Methode (dynamisch) aufruft.

  • Die Verwendung des Direktiven-Selektors in einer HTML-Vorlage funktioniert problemlos.

  • Ich versuche herauszufinden, ob wir dasselbe erreichen, ohne es in der Vorlage zu verwenden und indem wir die Direktivenmethode aufrufen.

meine-richtlinie.ts

@Directive({ selector: '[sampleDirective]' })

export class SampleDirective {
    ...
   constructor(..) {
        this.customDirective();
     }
  }
customDirective() {
    console.log('Inside customDirective()');
}

my-component.ts

import { SampleDirective } from './my.directive';
...
@Component({
 selector: 'my-component',
 template: `<button (click)="click()"> Click Me </button>`
})
constructor() { }
..
click() {
  // call directive method here
}

Ich brauche das, weil ich eine generische Lösung erstelle, um die DOM-Struktur einer Komponente zur Laufzeit mithilfe einer Direktive zu ändern.

** Bitte ignorieren Sie Tippfehler. Entschuldigung, dass ich hier nicht den vollständigen Code einfügen konnte

10
mperle

Wenn die Komponentenvorlage keine Direktive enthält, wird sie von Angular nicht verarbeitet. Mit ng-container Tag werden Sie in keiner Weise Vorlage überladen. Um die Direktive zu erhalten, benutze @ViewChildren/@ViewChild um die Instanz der Direktive zu erhalten:

@Component({
 selector: 'my-component',
 template: `<button (click)="click()"> Click Me </button>
            <ng-container sampleDirective></ng-container>`
})
@ViewChildren(SampleDirective) dirs;
constructor() { }
..
click() {
   this.dirs.first.customDirective();
  // call directive method here
}
14
Maxim Koretskyi

Zum Aufrufen der Anweisungsmethode aus der Komponente können Sie ViewChild decorator verwenden, um die Anweisungsinstanz auf der Seite zu suchen. Wenn Sie dasselbe verwenden, können Sie auf alle Requisiten zugreifen.

@ViewChild(SampleDirective) directive;
constructor() { }
..
click() {
  // call directive method here
  this.directive.customDirective()
}
0
Pankaj Parkar