Entonces tengo una directiva de atributo appGetCurrency aquí:
<md-select appGetCurrency [(ngModel)]="value" placeholder="Currency" name="currency"> <md-option *ngFor="let c of currencyList" [value]="c.code">{{c.dsc}}</md-option> </md-select> Me gustaría que la directiva appGetCurrency pase algunos valores a la lista de currencyList para construir la lista de opciones.
EDITAR
La directiva appGetCurrency solo obtiene una lista de monedas de un servicio, luego me gustaría pasar esa lista a la variable currencyList en la plantilla de host:
@Directive({ selector: '[appGetCurrency]' }) export class CurrencyDirective { currencies; constructor() { // build the <md-options> based on 'currencies' this.currencies = this.service.getCurrencies('asia'); } }Puede usar un EventEmitter como en un componente
@Directive({ selector: '[appGetCurrency]' }) export class CurrencyDirective { @Output() onCurrencyEvent = new EventEmitter(); currencies; constructor() { // build the <md-options> based on 'currencies' this.currencies = this.service.getCurrencies('asia').subscribe((res)=>{ this.onCurrencyEvent.emit(res); }); } }html:
<md-select appGetCurrency [(ngModel)]="value" placeholder="Currency" name="currency" (onCurrencyEvent)="currencyEventOnParent($event)">Componente principal:
currencyEventOnParent(event){ console.log(event); }Si desea pasar valor a la directiva, debe intentarlo así:
Esta es mi directiva personalizada y voy a compartir dos valores de componente o HTML.
prueba.directiva.ts:
import { Directive, ElementRef, Input, OnInit } from '@angular/core'; @Directive({ selector: '[input-box]' }) export class TestDirectives implements OnInit { @Input() name: string; @Input() value: string; constructor(private elementRef: ElementRef) { } ngOnInit() { console.log("input-box keys : ", this.name, this.value); } } y ahora se ha creado su directiva y tendrá que agregar esta directiva en su app.module.ts como se muestra a continuación:
aplicación.módulo.ts:
import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { TestDirectives } from '../directives/test.directive'; @NgModule({ declarations: [ AppComponent, TestDirectives ], imports: [], providers: [], bootstrap: [AppComponent] }) export class AppModule { }Deberá usar su directiva en su html y enviar datos a la directiva como en el código a continuación.
Estoy enviando name y value a test.directive.ts .
<div input-box [name]="'lightcyan'" [value]="'CYAN'"></div>o
<div input-box [name]="componentObject.name" [value]="componentObject.value'"></div>Ahora vea la consola o use los datos en la directiva en consecuencia.