web-dev-qa-db-de.com

Winkel 1,5 Komponente vs. alte Direktive - wo ist eine Linkfunktion?

Ich habe diesen schönen Artikel über den neuen .component()-Helfer in Angular 1.5 gelesen, der jedem helfen soll, schließlich zu Angular 2 zu wechseln. Alles sieht nett und einfach aus, aber ich konnte keine Informationen zur DOM-Manipulation in Komponenten finden.

Es gibt jedoch eine template-Eigenschaft, die eine Funktion sein kann und $element- und $attrs-Argumente akzeptieren kann. Noch ist mir nicht klar, ob dies der Ersatz für eine link-Funktion ist. Das scheint nicht so zu sein.

57
troorl

EDIT 2/2/16: Die 1.5-Dokumentation deckt jetzt die folgenden Komponenten ab: https://docs.angularjs.org/guide/component


Einige Gedanken zum Lesen (Links unten):

  • Komponenten ersetzen keine Anweisungen. Eine Komponente ist eine spezielle Anweisung, die einen Controller mit einer Vorlage organisiert.

  • Komponenten haben keine Verknüpfungsfunktion und Controller sind immer noch nicht der Ort, an dem Sie die DOM-Manipulation durchführen würden.

  • Wenn Sie eine DOM-Manipulation benötigen, kann Ihre Komponente andere Direktiven verwenden, die diese DOM-Manipulation in einer Verknüpfungsfunktion enthalten.

Ich habe eine Weile gebraucht, um das herauszufinden, aber als ich es einmal geschafft hatte, machte es Sinn: Komponenten sind Richtlinien, aber nicht alle Richtlinien sind oder müssen Komponenten sein.

Die Frage nach Verknüpfungsfunktionen ist eine natürliche Frage oder war für mich, als ich dachte, Komponenten würden Richtlinien ersetzen. Warum? Weil wir gelernt haben, die DOM-Manipulation in die Link-Funktion einer Direktive zu integrieren: "Direktiven, die das DOM ändern möchten, verwenden normalerweise die Link-Option, um DOM-Listener zu registrieren und das DOM zu aktualisieren." https://docs.angularjs.org/guide/directive .

Wenn Sie mit dieser Annahme arbeiten (Direktiven für Komponenten ersetzen), werden Sie feststellen, dass die Angular-Dokumente die Frage nicht beantworten, denn es ist nicht die richtige Frage, wenn Sie den Zweck einer Komponente kennen. (Komponenten sind in der $ compileProvider-Dokumentation nicht in der Direktive-Dokumentation beschrieben.)

Hintergrund lesen

Was ich oben sage, ist wirklich eine Umformulierung dessen, was Todd Motto in der wahrscheinlich besten Diskussion (bisher) über Komponenten und Richtlinien gesagt hat:

https://www.reddit.com/r/angularjs/comments/3taxjq/angular_15_is_set_to_in_einführung_der_Komponente/

Es könnte nützlich sein, diese Kommentare in einen allgemeineren Artikel zu ziehen.

Die meisten Artikel über Komponenten erwähnen keine Link-Funktion (dies bedeutet nicht, dass diese keine hervorragenden Artikel sind):

https://toddmotto.com/exploring-the-angular-1-5-component-method/

https://medium.com/@tomastrajan/component-paradigm-cf32e94ba78b#.vrbo1xso0

https://www.airpair.com/angularjs/posts/component-based-angularjs-directives

Oder wenn die Linkfunktion erwähnt wird, steht sie in Klammern:

http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html

Ein Artikel sagt, dass Komponenten "Controller statt Verknüpfungsfunktionen verwenden." Es ist jedoch keine "statt" Situation: Controller sind keine Stellvertreter für Linkfunktionen.

72
jody tate

Dies erleichtert das Schreiben einer App auf ähnliche Weise wie bei der Verwendung von Webkomponenten oder der Angular 2-Architektur der Anwendung.

Vorteile von Komponenten:

einfachere Konfiguration als einfache Anweisungen fördern vernünftige Standardwerte und Best Practices für komponentenbasiertes Schreiben von Architekturen optimiert Komponentenrichtlinien erleichtern das Upgrade auf Angular 2

Wann sollten Komponenten nicht verwendet werden:

für Anweisungen, die auf der DOM-Manipulation basieren, fügen Sie Ereignis-Listener hinzu etc, weil die Kompilier- und Linkfunktionen nicht verfügbar sind, wenn Sie Sie benötigen erweiterte Direktive-Definitionsoptionen wie Priorität, Terminal, Multielement, wenn Sie eine Direktive wünschen, die durch eine .__ ausgelöst wird. Attribut oder CSS-Klasse anstelle eines Elements

7
surekha shelake

Update (ab 22. August 2017): $ Inject wird empfohlen, um dies in AngularJS zu tun. Lesen Sie Styleguide: Styleguide link und AngularJS-Dokumente: AngularJS-Dokumente

Für die Verwendung von DOM-Bindungen in Komponenten anstelle der Erstellung einer Direktive mit Link-Funktion können Sie "$ element" oder einen anderen Dienst einfügen, den Sie in Ihrer Controller-Funktion benötigen, z.

app.component('pickerField', {
    controller: PickerField,
    template: '<span>Your template goes here</span>'
  });

  PickerField.$inject = ['$element'];

  function PickerField(element) {
    var self = this;
    self.model = self.node.model;
    self.open = function() {
      console.log('smth happens here');
    };
    element.bind('click', function(e) {
      console.log('clicked from component', e);
      self.open();
    });
  }

3

Ok, so scheint es, dass der Controller jetzt der richtige Ort dafür ist, da er der einzig mögliche ist. Wir können auch keine replace-Option im Helper einer Komponente verwenden.

2
troorl

Sie können die $ postLink () - Funktion verwenden, die sich im neuesten Winkel befindet. 

https://docs.angularjs.org/guide/component

Ähnlich wie bei der Post-Link-Funktion kann dieser Hook zum Einrichten von DOM .__ verwendet werden. Event-Handler und führen Sie die DOM-Manipulation durch.

0