入力経由で子コンポーネントから親コンポーネントの値にアクセスする方法

Question

私はモーダルメールを送信していますが、実際にはhttp.postリクエストに問題があります。問題は、子コンポーネントでpost()が実行されていることです。つまり、関数が実際に実行されるときにはthis.postUrlは未定義です。子コンポーネントがthis.postUrlにアクセスできるようにするには、どうすれば入力として渡すことができますか？なぜ私が入力と一緒にそれを渡したくないのかという理由は、子コンポーネントも他の場所でも使用されるため、postUrlは入力として使用するにはあまりにも特殊です。このシナリオでのみ使用されるためです。

@Component({ 
    selector: 'modal-email', 
    templateUrl: './app/assets/scripts/modules/modal/templates/modal-email/modal-email.component.html', 
    styleUrls: ['./app/assets/scripts/modules/modal/templates/modal-email/modal-email.component.css'], 
    inputs: [ 
    'model', 
    'postUrl', 
    'header', 
    'text' 
    ], 
    directives: [FormInputWithButtonComponent], 
    providers: [Http, HTTP_PROVIDERS] 
}) 

export class ModalEmailComponent { 

    constructor(private _http: Http) { 

    } 

    post() { 

    // this.postUrl becomes undefined, this.model is defined since it also lives in the child component 
    console.log(this.postUrl, this.model); 

    this._http.post(this.postUrl, {email: this.model}) 
     .map(res => res.json()) 
     .subscribe(
     data => this.data = data, 
     err => console.log(err) 
    ) 
    } 
} 

ModalEmailComponentは次のように使用されている：

<form-input-with-button [(model)]="email" type="email" [onSubmit]="post"></form-input-with-button> 

子コンポーネント：

@Component({ 
    selector: 'form-input-with-button', 
    templateUrl: './app/assets/scripts/modules/form-controls/form-input-with-button/form-input-with-button.component.html', 
    styleUrls: ['./app/assets/scripts/modules/form-controls/form-input-with-button/form-input-with-button.component.css'], 
    inputs: [ 
    'model', 
    'onSubmit' // onSubmit is what calls the post function from ModalEmailComponent 
    ], 
    host: { 
    '(input)': 'modelChange.emit($event.target.value)' 
    } 
}) 

export class FormInputWithButtonComponent { 
    @Input() model: string; 
    @Output() modelChange: EventEmitter = new EventEmitter(); 
} 

modal-emailインサイド

<modal-email postUrl="localhost:3000/email"></modal-email> 

はform-input-with-button>コンポーネントをあります

FormInputWithButtonComponentテンプレート：

<input [(ngModel)]="model" class="form-input-with-button"> 
<button (click)="onSubmit()" class="form-input-button">Submit</button> 

EDIT：はあなたがコンポーネントを拡張することはできますか？ような何か：私はそれが私はこれが不可能であることを考えさせるCannot read property prototype of undefinedを言ってみました

export class FormInputWithButtonComponent extends ModalEmailComponent 

。

Answer 1

実は、あなたが親コンポーネントのプロパティを注入することができ、任意のサービスや入力を使用せずに子供コンポーネントから値。

まず、あなたが子コンポーネントでコンストラクタからInjectorを注入する必要があります。

export class ChildComponent implements OnInit { 

     constructor(public injector:Injector) { 
     } 

     ngOnInit() { 
      let parentComponent = this.injector.get(ParentComponent); 
      this.postUrl = parentComponent. 
     } 
    } 

輸入

import {Injector} from "angular2/core"; 
import {OnInit} from "angular2/core"; 

Answer 2

私がお勧めするのは、postUrlの値を保存する1つのサービスを作成して、子どもがアクセスできるようにすることです。一方、あなたは、イベント・エミッターを使用して、次のように設定することができます。ChildComponentで

：

onSubmit(){ 
    EventEmit.emit('get')  
} 

EventEmit.subscribe(msg=>{ 
    http.post(msg) 
}) 

を親に：もちろん

EventEmit.subscribe(msg=> 

if (msg == 'get') EventEmit.emit(this.postUrl) 

); 

は、単に擬似コードのthatsあなたのニーズに合わせて調整する必要があります。