[解決済み】親クラスから子コンポーネントのメソッドを呼び出す - Angular
2022-04-07 03:41:22
質問
子コンポーネントを作成し、その子コンポーネントに呼び出したいメソッドがあります。
このメソッドを呼び出すと
console.log()
行を設定しません。
test
というプロパティがあるのですか?
以下は、私が変更を加えたクイックスタートAngularアプリです。
親
import { Component } from '@angular/core';
import { NotifyComponent } from './notify.component';
@Component({
selector: 'my-app',
template:
`
<button (click)="submit()">Call Child Component Method</button>
`
})
export class AppComponent {
private notify: NotifyComponent;
constructor() {
this.notify = new NotifyComponent();
}
submit(): void {
// execute child component method
notify.callMethod();
}
}
子供
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'notify',
template: '<h3>Notify {{test}}</h3>'
})
export class NotifyComponent implements OnInit {
test:string;
constructor() { }
ngOnInit() { }
callMethod(): void {
console.log('successfully executed.');
this.test = 'Me';
}
}
を設定するにはどうすればよいのでしょうか?
test
プロパティも必要ですか?
どのように解決するのですか?
を使用することで可能です。
@ViewChild
詳しくはこちらをご覧ください。
リンク
タイプセレクタ付き
子コンポーネント
@Component({
selector: 'child-cmp',
template: '<p>child</p>'
})
class ChildCmp {
doSomething() {}
}
親コンポーネント
@Component({
selector: 'some-cmp',
template: '<child-cmp></child-cmp>',
directives: [ChildCmp]
})
class SomeCmp {
@ViewChild(ChildCmp) child:ChildCmp;
ngAfterViewInit() {
// child is set
this.child.doSomething();
}
}
文字列セレクタ付き
子コンポーネント
@Component({
selector: 'child-cmp',
template: '<p>child</p>'
})
class ChildCmp {
doSomething() {}
}
親コンポーネント
@Component({
selector: 'some-cmp',
template: '<child-cmp #child></child-cmp>',
directives: [ChildCmp]
})
class SomeCmp {
@ViewChild('child') child:ChildCmp;
ngAfterViewInit() {
// child is set
this.child.doSomething();
}
}
関連
-
[解決済み] Uncaught (in promise): Ionic 2でcordova_not_available。
-
[解決済み] Angular 2.0 翻訳パイプが見つかりません。
-
[解決済み] Angular 2でディレイを作成する方法
-
[解決済み] ReferenceError: localStorageが定義されていません。
-
[解決済み] ag-gridで「表示する行がありません」テキストをプログラムで変更するにはどうすればよいですか?
-
[解決済み] ブレークポイントの解除 - VS Code | Chrome | Angular
-
[解決済み] モジュール 'ngx-cookie-service' が見つかりません。
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] Angularの@Directiveと@Componentの比較
-
[解決済み】親コンポーネントのCSSファイルから子コンポーネントのスタイルを設定する方法は?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】エラー。どのルートにもマッチしません。URLセグメント: - Angular 2
-
[解決済み] Angular 4: コンポーネントファクトリが見つかりません。@NgModule.entryComponents に追加しましたか?
-
[解決済み] Angular material Angular Material コアテーマが見つかりませんでした。
-
[解決済み] Visual Code で未定義のプロパティ 'thisCompilation' を読み取ることができません。
-
[解決済み] Angular CLIでコンポーネントの名前を変更する方法は?
-
[解決済み] Electron - ローカルリソースのロードが許可されていません
-
[解決済み] "rxjs" observable.throw は関数ではありません - Angular4
-
[解決済み] Angular InjectionTokenが「No provider for InjectionToken」をスローします。
-
[解決済み] Angular2において、テンプレートを必要としないコンポーネントがありますが、テンプレートエラーが発生します。
-
[解決済み] モジュール 'AppModule' によってインポートされた予期しないディレクティブ 'LoginComponent' があります。NgModuleアノテーションを追加してください。