- 私の親ページで入力

Question

を経由してコンポーネントにオブジェクトを渡されます、私はここにリンクを持っている：親ページ上の子コンポーネントで

showPermissionsRates(item) { 
     this.currentEventPoolId = item; 
    } 

：

<a (click)="showPermissionsRates(5757);">Link</a> 

機能がそれを設定しますここに：

012：私が使用して私の子コンポーネントのTSファイルで

<app-event-pools-permissions-rates [eventPoolId]="currentEventPoolId "></app-event-pools-permissions-rates> 

そして、

inputs: ['eventPoolId'] 

しかし、子コンポーネントでどのように '5757'の値を取得できますか？アラートを使用するなど？

Answer 1

を使用して、子コンポーネントのコンストラクタで、それをリッスンする必要があり、あなたがクリックイベントで入力変数での値を設定していると思います）を子プロパティに追加します。

私は一緒に非常に基本的な例を示し、これを入れてきましたが、あなたの問題についてに行く方がなくて、あなたが必要なものを知るのは難しい： https://plnkr.co/edit/y9clOla1WrPFmhMJoz7o?p=preview

要旨はあなたの入力をマークする@Input()を使用することです子コンポーネント内に作成し、親のテンプレート内のそれらをマップします。

import {Component} from '@angular/core' 
 
import {BrowserModule} from '@angular/platform-browser' 
 

 
import { ChildComponent } from 'child.component.ts'; 
 

 
@Component({ 
 
    selector: 'my-app', 
 
    template: ` 
 
    <div> 
 
     <button (click)="changeProperty('ABC 123')">Click Me!</button> 
 
    
 
     <child-component [childProperty]="parentProperty"></child-component> 
 
    </div> 
 
    `, 
 
}) 
 
export class App { 
 
    public parentProperty: string = "parentProp"; 
 
    
 
    public changeProperty(newProperty: string) : void { 
 
    this.parentProperty = newProperty; 
 
    } 
 
}

その後、子供に：

import {Component, Input} from '@angular/core' 
 

 
@Component({ 
 
    selector: 'child-component', 
 
    template: ` 
 
    <div>Hello World: {{ childProperty }}</div> 
 
    `, 
 
}) 
 
export class ChildComponent { 
 
    
 
    @Input() 
 
    childProperty:string; 
 
    
 
    constructor() { 
 
    this.childProperty = 'childProp' 
 
    } 
 
}

Answer 2

私は、あなたが（あなただけ@Inputを使用することができるはずngonchanges

ngOnChanges(changes: SimpleChanges) { 

      if(changes['eventpoolid'] && changes['eventpoolid'].currentValue) { 
// you get updated value here 
    } 
    }