親コンポーネントのangular2呼び出し関数


83

ファイルをアップロードできるアップロードコンポーネントがあるアプリがあります。に埋め込まれていbody.componentます。

アップロード時BodyComponent.thefunction()に、親コンポーネントの関数(例)を使用する必要があります(データを更新するために呼び出しを実行します)。ただし、親が具体的にである場合に限りbody.componentます。アップロードは、動作が異なる他の場所でも使用される可能性があります。

のようなものparent(this).thefunction()、それを行う方法は?

回答:


145

子コンポーネントでカスタムイベントを作成します。そんな感じ:

@Component({
  selector: 'child-comp',
  (...)
})
export class ChildComponent {
  @Output()
  uploaded = new EventEmitter<string>();

  uploadComplete() {
    this.uploaded.emit('complete');
  }

親コンポーネントがこのイベントに登録できます

@Component({
  template `
    <child-comp (uploaded)="someMethod($event)"></child-comp>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  (...)

  someMethod(event) {
  }
}

別の方法は、親コンポーネントを子コンポーネントに注入することですが、それらは強くリンクされます...


出力未定義エラーが発生する理由はありますか?からインポートすることにより、上部のtypescriptで定義されangular2/coreます。コンソールログは、angular2-polyfillsの問題を示しています
PascalVKooten

ああ、私の答えにはタイプミスがあります:の@Ouput代わりに@Output。それは問題かもしれません...私は私の答えを更新しました。
Thierry Templier 2016年

ねえ、気づかなかった。それだけです。
pascalVKooten 2016年

uploadComplete is not definedこれらを例としてコピーしたことに注意してください。親にも「someMethod」がありますが、すでにuploadComplete。に問題があります。親コンポーネントは子ノードで(アップロードされた)バインディングを使用し、すでに子をディレクティブとして持っていました。
pascalVKooten 2016年

3
@Component内のディレクティブとパイプは、AngularRC6から非推奨になりました。
alex351 2017年

47

以下は私のために最新のものです

Angular5

class ChildComponent {
  @Output() myEvent = new EventEmitter<string>();

  callParent() {
    this.myEvent.emit('eventDesc');
  }
}

ParentTemplateのテンプレート

<child-component (myEvent)="anyParentMehtod($event)"

3
これは単純であり、親が呼び出すメソッドを決定するため、優れたソリューションです。私のように:
Jette 2018

1
ルーターアウトレットを使用している場合はどうなりますか?それでも(myEvent)を使用できますか?
ロバートウィリアムス

親コンポーネント内で使用される子コンポーネント用です。ルーターアウトレットについてはよくわかりません。この質問があなたを助けるかもしれません。stackoverflow.com/questions/45949476/...
Shabbir Dhangot

30

イベントを伴わないソリューション。

がありChildComponent、そこからmyMethod()に属するメソッドを呼び出したいとしますParentComponent(元の親のコンテキストを保持します)。

親コンポーネントクラス:

@Component({ ... })
export class ParentComponent {

    get myMethodFunc() {
        return this.myMethod.bind(this);
    }

    myMethod() {
         ...
    }
}

親テンプレート:

<app-child [myMethod]="myMethodFunc"></app-child>

子テンプレート

@Component({ ... })
export class ChildComponent {

    @Input() myMethod: Function;

    // here I can use this.myMethod() and it will call ParentComponent's myMethod()
}

1
これを使ってみましたが、うまくいきません。私のバージョンのmyMethodでは、親コンポーネントのタブセットを参照しています(親の子からタブを切り替えようとしています)。親でこれを参照すると、すべてが機能します。子からmyMethodに入りますが、タブは変更しません。したがって、参照しているタブセットは、子供がアクセスしているときの実際のタブセットのコピーであるかどうか疑問に思います。this.myMethod.bind(this)返送されたときにここで何が起こっているのか、実際にはわかりません。(おそらく私は代わりに根本的に間違ったことをしているのかもしれません。)
Katharine Osborne

私は知っていますが、私は8番目のバージョンを使用していません。5バージョンを使用するIonic3にこれが必要です。
ヴァシリスギリシャ

@VasilisGreeceどうすればよいかわかりませんが、最新のIonicバージョン(現在は4)に更新することを強くお勧めします
FrancescoBorzi19年

23

親コンポーネントを子コンポーネントに注入できます。

詳細はを参照してください
-私は、子コンポーネントに親コンポーネントに注入する方法は?
-角度2子コンポーネントは、親コンポーネントを指し ますが、そのことを確認することができます。この方法でthefunction()親がある場合にのみ呼び出されますbody.component

constructor(@Host() bodyComp: BodyComponent) {

それ以外の場合@Output()は、子から親への通信に使用することをお勧めします。


1
ところで、私はしなければならなかったconstructor(@Host() bodyComp: BodyComponent)..多分それは最近変更されました。うまくいきます、thx!
Eddy Verbruggen 2017

たくさんThanjsアップ、I混合何か-固定
ギュンターZöchbauer
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.