[解決済み】angular2で他のコンポーネントの関数を呼び出す方法
2022-04-08 12:26:58
質問
以下のような2つのコンポーネントがあり、別のコンポーネントから関数を呼び出したいと思っています。両方のコンポーネントは、ディレクティブを使用して3番目の親コンポーネントに含まれています。
コンポーネント1
@component(
selector:'com1'
)
export class com1{
function1(){...}
}
コンポーネント 2:
@component(
selector:'com2'
)
export class com2{
function2(){...
// i want to call function 1 from com1 here
}
}
を使ってみました。
@input
と
@output
が、その使い方や関数の呼び出し方がよくわからないのですが、どなたか教えていただけませんか?
解決方法は?
com1 と com2 が兄弟である場合、以下のように使用することができます。
@component({
selector:'com1',
})
export class com1{
function1(){...}
}
com2 は
EventEmitter
@component({
selector:'com2',
template: `<button (click)="function2()">click</button>`
)
export class com2{
@Output() myEvent = new EventEmitter();
function2(){...
this.myEvent.emit(null)
}
}
ここでは、親コンポーネントがイベントバインディングを追加して、次のイベントをリッスンします。
myEvent
のイベントが発生し、その後に
com1.function1()
そのような事態が発生した場合
#com1
はテンプレート変数で、テンプレート内の他の場所からこの要素を参照することができます。するために使用しています。
function1()
のイベントハンドラです。
myEvent
または
com2
:
@component({
selector:'parent',
template: `<com1 #com1></com1><com2 (myEvent)="com1.function1()"></com2>`
)
export class com2{
}
コンポーネント間の通信を行うためのその他のオプションについては、以下を参照してください。 コンポーネントインタラクション
関連
-
[解決済み] Angular 2で簡単なアコーディオンを作成するにはどうすればよいですか?
-
[解決済み] <selector>' が Angular コンポーネントの場合、それがこのモジュールの一部であることを確認する。
-
[解決済み] プロパティ 'json' はタイプ 'Object' に存在しません。
-
[解決済み] Angular 6 Error trying to diff '[object Object]'. 配列と反復記号のみが許可されます。
-
[解決済み] switchの使用時に「ステートメントはif文でフィルタリングされなければならない」というtslintのクレームが発生する。
-
[解決済み] なぜ mat-tables matRowDef は 2 つの変数を含むのですか?
-
[解決済み] Angular2において、テンプレートを必要としないコンポーネントがありますが、テンプレートエラーが発生します。
-
[解決済み] Angular2の素材ダイアログに問題あり - @NgModule.entryComponentsに追加しましたか?
-
[解決済み】親コンポーネントのCSSファイルから子コンポーネントのスタイルを設定する方法は?
-
[解決済み] Angular2 bodyタグにクラスを追加する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 node_modules/rxjs/internal/types.d.ts(81,44): エラー TS1005: ';' Angular 6のインストール後に予想されたエラー
-
[解決済み] node_modules が空になったので、`npm install`を実行する必要があるかもしれない。
-
[解決済み] @viewChildが機能しない - プロパティnativeElementがundefinedで読み込めない
-
[解決済み] ngForにフィルターをかけるには?
-
[解決済み] Angular2 Final Release - 「Error: AngularにはZone.jsのプロリフィルが必要です"
-
[解決済み] ng serve または firebase serve を終了させる方法
-
[解決済み] NgModule が見つかりませんでした。NgModule でのインポートをスキップするには skip-import オプションを使用します。
-
[解決済み] Uncaught (in promise): Ionic 2でcordova_not_available。
-
[解決済み] なぜ mat-tables matRowDef は 2 つの変数を含むのですか?
-
[解決済み] コンポーネントは2つのモジュールの宣言に含まれる