Tengo una directiva que se aplica a todas las instancias de un componente (utilizo el selector de componentes como la propiedad del selector de mi directiva), y quiero poder pasar la entrada a esa directiva.
Hice el ejemplo lo más pequeño y compacto posible. Digamos que tengo un componente que se ve así:
import { Component, Input } from '@angular/core'; @Component({ selector: 'component-a', template: `<h1>My format is {{ format }}!</h1>` }) export class ComponentAComponent { public format: string; }Tengo la siguiente directiva que apunta y modifica instancias de este componente:
import { Directive, Input } from '@angular/core'; import { ComponentAComponent } from './component-a.component'; @Directive({ selector: 'component-a', }) export class ComponentADirective { @Input() myCustomFormat; constructor(cmp: ComponentAComponent) { cmp.format = this.myCustomFormat; } }Y estoy tratando de pasarle una entrada:
<component-a [myCustomFormat]="'Test'"></component-a>Sin embargo, no funciona. ¿Qué estoy haciendo mal?
Las directivas siguen el ciclo de vida de cualquier elemento de Angular.
Esto significa que, al igual que los componentes, se declara un @Input en ganchos específicos.
En lugar de configurarlo en su constructor, intente configurarlo en
Ambos son válidos, pero on init se activa una vez, mientras que on changes se activa con cada cambio de valor de entrada.