Acabo de empezar a trabajar con Angular 2.
Me preguntaba cuáles son las diferencias entre componentes y directivas en Angular 2.
Acabo de empezar a trabajar con Angular 2.
Me preguntaba cuáles son las diferencias entre componentes y directivas en Angular 2.
Respuestas:
Básicamente, hay tres tipos de directivas en Angular2 según la documentación.
También es un tipo de directiva con plantilla, estilos y parte lógica, que es el tipo de directiva más famoso entre todos en Angular2. En este tipo de directiva, puede usar otras directivas, ya sean personalizadas o integradas en la @Component
anotación, como sigue:
@Component({
selector: "my-app"
directives: [custom_directive_here]
})
Utilice esta directiva en su opinión como:
<my-app></my-app>
Para la directiva de componentes, he encontrado el mejor tutorial aquí.
Me gusta *ngFor
y *ngIf
, se utiliza para cambiar el diseño DOM agregando y eliminando elementos DOM. explicado aquí
Se utilizan para dar un comportamiento o estilo personalizado a los elementos existentes aplicando algunas funciones / lógica. Like ngStyle
es una directiva de atributo para dar estilo dinámicamente a los elementos. Podemos crear nuestra propia directiva y usar esto como atributo de algunos elementos predefinidos o personalizados, aquí está el ejemplo de una directiva simple:
Primero tenemos que importar la directiva de @angular/core
import {Directive, ElementRef, Renderer, Input} from '@angular/core';
@Directive({
selector: '[Icheck]',
})
export class RadioCheckbox {
// custom logic here...
}
Podemos usar esto en la vista como se muestra a continuación:
<span Icheck>HEllo Directive</span>
Para obtener más información, puede leer el tutorial oficial aquí y aquí.
Los componentes tienen su propia vista (HTML y estilos). Las directivas son simplemente "comportamientos" agregados a elementos y componentes existentes.
Component
se extiende Directive
.
Por eso, solo puede haber un componente en un elemento host, pero múltiples directivas.
Las directivas estructurales son directivas que se aplican a <template>
elementos y se utilizan para agregar / eliminar contenido (estampar la plantilla). Las *
aplicaciones de directiva in como *ngIf
hacen <template>
que se cree una etiqueta implícitamente.
Para completar lo dicho por Günter, podemos distinguir dos tipos de directivas:
NgFor
y NgIf
. Estos están vinculados al concepto de plantilla y deben tener el prefijo *
. Consulte la sección "Plantillas y *" en este enlace para obtener más detalles: http://victorsavkin.com/post/119943127151/angular-2-template-syntaxEspero que te ayude, Thierry
Aquí está la definición real.
Cualquier otra definición es incorrecta.
Un componente es una directiva con una vista asociada (es decir, HTML para ser renderizado). Todos los componentes son directivas, pero no todas las directivas son componentes. Hay tres tipos de directivas:
*ngIf
que puede insertar o eliminar un elemento DOM (o un componente angular que es un elemento DOM personalizado, pero sigue siendo un elemento DOM).import { Component, HostListener, HostBinding, Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
@Component({
selector: 'app-root',
template: `
<div *ngIf='myBool' appHighlight>Hi there</div>
`,
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
myBool:boolean = true;
}
En el ejemplo anterior podemos observar lo siguiente:
AppComponent
tiene una plantilla con un <div>
elemento que muestra, hola.<div>
elemento. Esto significa que manipulará el comportamiento del <div>
elemento. En este caso, resaltará el texto y lo volverá amarillo.*ngIf
también se ubica en el <div>
elemento y determinará si el elemento debe insertarse. El se <div>
mostrará condicionalmente dependiendo de si myBool
se puede forzar la expresión true
.Angular 2 sigue el modelo de arquitectura de componentes / servicios.
Una aplicación angular 2 está hecha de componentes. Un componente es la combinación de una plantilla HTML y una clase de componente (una clase de mecanografiado) que controla una parte de la pantalla.
Como buena práctica, la clase de componente se usa para el enlace de datos a la vista respectiva. El enlace de datos bidireccional es una gran característica proporcionada por angular framework.
Los componentes se pueden reutilizar en toda la aplicación mediante el nombre de selector proporcionado.
Component también es una especie de directiva con una plantilla.
Otras dos directivas son
Directivas estructurales: cambie el diseño del DOM agregando y eliminando elementos DOM. Ej: NgFor
y NgIf
.
Directivas de atributo: cambie la apariencia o el comportamiento de un elemento, componente u otra directiva. Ex: NgStyle
En realidad, los componentes también son directivas, pero tienen diferencias entre ellos.
Directivas de atributos :
Las directivas de atributo son clases que pueden modificar el comportamiento o la apariencia de un solo elemento. Para crear una directiva de atributo, aplique el @Directive
a una clase.
import { Directive, ElementRef } from "@angular/core";
@Directive({
selector: "[custom-attr]", })
export class CustomAttrDirective {
constructor(element: ElementRef) {
element.nativeElement.classList.add("bg-success", "text-white");
}
}
Agregar un archivo template.html de atributo de directiva
<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
<td>{{i + 1}}</td>
<td>{{item.name}}</td>
</tr>
Directivas estructurales :
Las directivas estructurales cambian el diseño del documento HTML agregando y eliminando elementos, como micro-plantillas. Las directivas estructurales permiten que el contenido se agregue de forma condicional en función del resultado de una expresión como *ngIf
o que el mismo contenido se repita para cada objeto en una fuente de datos como *ngFor
.
Puede usar las directivas integradas para tareas comunes, pero escribir directivas estructurales personalizadas brinda la capacidad de adaptar el comportamiento a su aplicación.
<p *ngIf="true">
Expression is true and ngIf is true.
This paragraph is in the DOM.
</p>
<p *ngIf="false">
Expression is false and ngIf is false.
This paragraph is not in the DOM.
</p>
Componentes :
Los componentes son directivas que tienen sus propias plantillas, en lugar de depender del contenido proporcionado desde otro lugar. Los componentes tienen acceso a todas las funciones directivas, aún tienen un elemento de host, aún pueden definir propiedades de entrada y salida, etc., pero también definen su propio contenido.
Puede ser fácil subestimar la importancia de la plantilla, pero las directivas estructurales y de atributos tienen limitaciones. Las directivas pueden hacer un trabajo útil y poderoso, pero no tienen mucha información sobre los elementos a los que se aplican. Las directivas son más útiles cuando son herramientas de propósito general, como la ngModel
directiva, que se puede aplicar a cualquier propiedad del modelo de datos y cualquier elemento de formulario, sin importar para qué se utilizan los datos o el elemento.
Los componentes, por el contrario, están estrechamente vinculados al contenido de sus plantillas. Los componentes proporcionan los datos y la lógica que utilizarán los enlaces de datos que se aplican a los elementos HTML en la plantilla, que proporcionan el contexto utilizado para evaluar las expresiones de enlace de datos y actúan como el pegamento entre las directivas y el resto de la aplicación. Los componentes también son una herramienta útil para permitir que los grandes proyectos de Angular se dividan en partes manejables.
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'app-hero-child',
template: `
<h3>{{hero.name}} says:</h3>
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
`
})
export class HeroChildComponent {
@Input() hero: Hero;
@Input('master') masterName: string;
}