[解決済み] viewchildを使用して複数のviewchildrenにアクセスする
2022-04-22 14:57:12
質問
私はカスタムコンポーネントを作成し、forループに配置しました。
<div *ngFor="let view of views">
<customcomponent></customcomponent>
</div>
という出力になる。
<customcomponent></customcomponent>
<customcomponent></customcomponent>
<customcomponent></customcomponent>
これらのコンポーネントの数が変化する場合、@viewchild構文または他の手段を使用して、これらのコンポーネントへの参照を取得する方法を知りたいのです。
コンポーネントに名前を付けることができる場合、例えば
<customcomponent #compID></customcomponent>
すると、次のように参照できるようになる。
@ViewChild('compID') test: CustomComponent
そうでない場合、例えばインデックスを使用する場合、どのように参照すればよいのでしょうか?
(この質問は、複数の@ViewChildへのアクセスおよびリストクエリの使用に関するものです。
どのように解決するのですか?
使用方法
@ViewChildren
から
@angular/core
を使用して、コンポーネントへの参照を取得します。
テンプレート
<div *ngFor="let v of views">
<customcomponent #cmp></customcomponent>
</div>
コンポーネント
import { ViewChildren, QueryList } from '@angular/core';
/** Get handle on cmp tags in the template */
@ViewChildren('cmp') components:QueryList<CustomComponent>;
ngAfterViewInit(){
// print array of CustomComponent objects
console.log(this.components.toArray());
}
関連
-
[解決済み] Angular HTMLバインディング
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] Angular 2.0のルーターがブラウザーの再読み込みで動作しない件
-
[解決済み] Angular CLI Error: serveコマンドはAngularプロジェクトで実行する必要がありますが、プロジェクト定義が見つかりませんでした。
-
[解決済み] Angular2 ngSwitchステートメントでtypescriptのenum値を使用する方法
-
[解決済み] Angular 4 HttpClient クエリパラメータ
-
[解決済み] Angular 6 素材マットセレクトの変更方法が削除されました。
-
[解決済み] Angular HttpClient "パース中のHttp失敗"
-
[解決済み] angular2 tslintの警告を止めるためにコンポーネントのデフォルトプレフィックスを変更する方法
-
[解決済み] Angular 2の無効化されたコントロールがform.valueに含まれない
最新
-
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 Sass は現在の環境のためのバインディングを見つけることができませんでした。Windows 64ビット、Node.js 8.x。
-
[解決済み] Angularで@Input()の値が変更されたときに検出する方法は?
-
[解決済み] コンポーネントテンプレートで要素を選択するには?
-
[解決済み] 現在のルートを取得する方法
-
[解決済み] 例外が発生しました。既知のネイティブプロパティではないため、'ngFor'にバインドできない
-
[解決済み] Angular 4 HttpClient クエリパラメータ
-
[解決済み] viewchildを使用して複数のviewchildrenにアクセスする
-
[解決済み] Angular - "has no exported member 'Observable'" エクスポートされたメンバーがありません。
-
[解決済み] AngularでngFor repeatをある数のアイテムに制限するにはどうすればよいですか?
-
[解決済み] Angular 2+ - ベースのhrefを動的に設定する