角度2：属性ディレクティブからのパス値コンポーネント変数

Question

ように私はここで、属性ディレクティブappGetCurrencyを持っている：

<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> 

私はappGetCurrencyディレクティブが構築するためにcurrencyListにいくつかの値を渡すことを希望オプションのリスト

EDIT

appGetCurrencyディレクティブだけで、私は、ホストテンプレートにcurrencyList変数にそのリストを渡したい、サービスから通貨の一覧を取得する：

@Directive({ selector: '[appGetCurrency]' }) 

export class CurrencyDirective { 
    currencies; 

    constructor() { 
    // build the <md-options> based on 'currencies' 
    this.currencies = this.service.getCurrencies('asia'); 
    } 

} 

Answer 1

することができますコンポーネントと同じようにEventEmitterを使用してください。

@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)"> 

親コンポーネント：

currencyEventOnParent(event){ 
    console.log(event); 
} 

Answer 2

あなたはディレクティブに値を渡したいなら、あなたはこのように試してみてください：

これは私のカスタムディレクティブで、私は2つの値を共有するつもりですコンポーネントやHTMLから。

test.directive.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); 
    } 
} 

、今、あなたのディレクティブが作成されていると、あなたのapp.module.ts以下のようにこのディレクティブを追加しています：

app.module.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 { } 

あなたウィルあなたのhtmlであなたの指示を使用し、以下のコードのように指令にデータを送る必要があります。

nameとvalueをtest.directive.tsに送信しています。

<div input-box [name]="'lightcyan'" [value]="'CYAN'"></div> 

または

<div input-box [name]="componentObject.name" [value]="componentObject.value'"></div> 

今応じディレクティブでコンソールまたは使用データを参照してください。