javascript - personalizadas - pasar parametros entre componentes angular 4

Componente angular 1.5 frente a la directiva anterior: ¿dónde está una función de enlace?

Question

He estado leyendo este bonito article reciente sobre el nuevo ayudante .component() en Angular 1.5, que se supone que ayudará a todos a migrar a Angular 2 eventualmente. Todo se ve bien y simple, pero no pude encontrar ninguna información sobre la manipulación DOM dentro de los componentes.

Sin embargo, hay una propiedad de template , que puede ser una función y aceptar argumentos $element y $attrs . Todavía no me queda claro si ese es el reemplazo de una función de link . No lo parece.

Answer 1

De acuerdo con la documentación actual de Angular2 (consulte https://github.com/angular/angular/blob/master/modules/angular2/docs/core/02_directives.md ) todavía habrá directivas en Angular2. Básicamente, podrá usar tanto @Directive o @Component, donde:

• Las directivas son útiles para encapsular el comportamiento.
• Component es una directiva que utiliza shadow DOM para crear un comportamiento visual encapsulado. Los componentes se usan generalmente para crear widgets de interfaz de usuario o para dividir la aplicación en componentes más pequeños.

Entonces, de acuerdo con esto, si necesita manipulación DOM necesitará usar @Directive, por lo tanto, Angular.directive en Angular 1.x. Los enlaces de eventos se pueden hacer usando las propiedades del host . En cuanto a la manipulación DOM per se, todavía falta documentación (por ejemplo, https://github.com/angular/angular/blob/master/modules/angular2/docs/core/09_compilation.md o https://github.com/angular/angular/blob/master/modules/angular2/docs/core/08_lifecycle.md ) pero puede buscar Lifecycle como se sugiere aquí https://stackoverflow.com/a/32062065 .

Como respuesta breve, con Angular 1.5+, continúe usando angular.directive si tiene acceso DOM, de lo contrario, encapsule en angular.component . También intente reducir lo más posible el uso de $scope para eventos no dom y prefiera RxJS para eso, consulte https://medium.com/front-end-developers/managing-state-in-angular-2-using-rxjs-b849d6bbd5a5#.obgb6dl6n ,

Answer 2

Esto hace que sea más fácil escribir una aplicación de manera similar al uso de componentes web o al estilo de arquitectura de aplicaciones de Angular 2.

Ventajas de los componentes:

una configuración más simple que las directivas simples promueven valores predeterminados sanos y las mejores prácticas optimizadas para la arquitectura basada en componentes que escriben directivas de componentes facilitarán la actualización a Angular 2

Cuándo no usar componentes:

para directivas que dependen de la manipulación del DOM, agregar oyentes de eventos, etc., porque las funciones de compilación y enlace no están disponibles cuando necesita opciones avanzadas de definición de directivas como prioridad, terminal, multielementos cuando desea una directiva activada por un atributo o clase CSS , en lugar de un elemento

Answer 3

Ok, parece que el controlador es el lugar adecuado para él ahora, ya que es el único posible. Tampoco podemos usar una opción de replace en un componente auxiliar.

Answer 4

Puede usar la función $ postLink () que está en el ángulo más nuevo.

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

Similar a la función de post-enlace, este enlace se puede usar para configurar controladores de eventos DOM y hacer una manipulación DOM directa.

Answer 5

Actualización (del 22 de agosto de 2017): $ inject se recomienda para hacer esto en AngularJS. Lea Styleguide: enlace Styleguide y documentos de AngularJS : documentos de AngularJS

Para usar enlaces DOM en componentes en lugar de crear una directiva con función de enlace, puede inyectar ''$ element'' u otro servicio que necesite en su función de controlador, por ejemplo

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();
    });
  }

Answer 6

EDITAR 2/2/16: La documentación 1.5 ahora cubre componentes: https://docs.angularjs.org/guide/component

Algunas reflexiones basadas en algunas lecturas (enlaces a continuación):

• Los componentes no son reemplazos de directivas. Un componente es un tipo especial de directiva que organiza un controlador con una plantilla.

• Los componentes no tienen una función de enlace y los controladores aún no están donde manejaría la manipulación DOM.

• Si necesita manipulación DOM, su componente puede usar otras directivas que incluyen esa manipulación DOM en una función de enlace.

Me tomó un tiempo entender esto, pero una vez que lo hice, tenía sentido: los componentes son directivas, pero no todas las directivas son, o deben ser, componentes.

La pregunta sobre las funciones de enlace es natural, o lo era para mí, cuando pensaba que los componentes estaban reemplazando las directivas. ¿Por qué? Debido a que nos han enseñado a poner la manipulación DOM dentro de la función de enlace de una directiva: "Las directivas que desean modificar el DOM generalmente usan la opción de enlace para registrar oyentes DOM así como actualizar el DOM". https://docs.angularjs.org/guide/directive .

Si está ejecutando esa suposición (los componentes reemplazan las directivas), entonces encontrará que los documentos angulares no responden la pregunta porque, bueno, no es la pregunta correcta una vez que conoce el propósito de un componente. (Los componentes se describen en la documentación de $ compileProvider, no en la https://docs.angularjs.org/guide/directive la https://docs.angularjs.org/guide/directive ).

Lectura de fondo

Lo que digo arriba es realmente una reformulación de lo que ha dicho Todd Motto en lo que probablemente sea la mejor discusión (hasta ahora) sobre componentes y directivas:

https://www.reddit.com/r/angularjs/comments/3taxjq/angular_15_is_set_to_introduce_the_component/

Podría ser útil tener esos comentarios en un artículo más general.

La mayoría de los artículos sobre componentes no mencionan una función de enlace (esto no significa que no sean artículos excelentes):

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

O cuando se menciona la función de enlace, está entre paréntesis:

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

Un artículo dice que los componentes "usan controladores en lugar de funciones de enlace". Pero no es una situación de "cambio": los controladores no son sustitutos de las funciones de enlace.