viewChildによるビュークエリ
子要素をSignalとしてクエリします。
「viewChildによるビュークエリ」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
Viewのクエリ
コンポーネントでは、テンプレート内の要素や子コンポーネントへの参照が必要になることがよくあります。Modern Angularでは、シグナルベースのviewChild()クエリ関数が提供されています。
viewChildの宣言
テンプレート参照名またはコンポーネント型を指定してviewChild()を呼び出します。戻り値はシグナルです。
import { Component, viewChild, ElementRef } from "@angular/core";
@Component({
selector: "app-form",
template: "<input #box>"
})
export class FormComponent {
box = viewChild<ElementRef>("box");
}クエリの読み取り
すべてのシグナルと同様に、Viewクエリは呼び出して読み取ります。ビューの準備が完了するまではundefinedを返し、準備が完了すると一致した要素を返します。
focus() {
this.box()?.nativeElement.focus();
}子コンポーネントのクエリ
コンポーネントクラスを渡すと、子コンポーネントのインスタンスへの型付き参照を取得できます。
import { viewChild } from "@angular/core";
child = viewChild(ChildComponent);
run() {
this.child()?.doSomething();
}必須のViewクエリ
クエリ対象の要素が必ず存在する場合は、viewChild.required()を使用します。これにより、シグナルはnull非許容になります。
box = viewChild.required<ElementRef>("box");
focus() {
this.box().nativeElement.focus(); // no optional chaining
}複数の要素のクエリ
viewChildren()は、一致したすべての要素を含む読み取り専用配列を保持するシグナルを返します。
import { viewChildren } from "@angular/core";
items = viewChildren(ItemComponent);
count() {
return this.items().length;
}クエリが解決されるタイミング
シグナルベースのViewクエリは、ビューの初期化後に解決されます。effect内で読み取ると、利用可能になってから処理を実行できます。
constructor() {
effect(() => {
const el = this.box();
if (el) el.nativeElement.focus();
});
}viewChildとViewChildデコレーターの比較
シグナルのviewChild()は従来の@ViewChildデコレーターに代わるもので、シグナルと統合され、多くの場合に手動でライフサイクルのタイミングを管理する必要がなくなります。
// classic:
@ViewChild("box") box!: ElementRef;
// modern:
box = viewChild<ElementRef>("box");特定のトークンの読み取り
readオプションを使うと、一致した要素から別のトークンをクエリできます。たとえば、ディレクティブやElementRefを取得できます。
tooltip = viewChild("trigger", { read: TooltipDirective });プロジェクションにcontentChildを使用する
コンポーネント自身のビューではなく、プロジェクションされたコンテンツを対象にする場合は、対応するcontentChild()およびcontentChildren()クエリを使用します。
import { contentChild } from "@angular/core";
header = contentChild(HeaderComponent);適切なクエリの選択
自身のテンプレートにはViewクエリを、プロジェクションされたコンテンツにはContentクエリを使用します。対象が必ず存在する場合はrequired版を、コレクションには複数形の版を選びます。
理解度チェック
シグナルベースのViewクエリについて理解度を確認しましょう。
まとめ
シグナルのviewChild()は、コンポーネントのビュー内にある要素や子コンポーネントをクエリします。必ず存在する対象にはviewChild.required()を、コレクションにはviewChildren()を、特定のトークンにはreadオプションを、プロジェクションされたコンテンツにはcontentChild()を使用します。
よくある質問
「viewChildによるビュークエリ」レッスンは無料ですか？
はい。「viewChildによるビュークエリ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「viewChildによるビュークエリ」で何を学びますか？
子要素をSignalとしてクエリします。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「viewChildによるビュークエリ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- input()によるSignal入力
- 必須入力と変換入力
- output()による出力
- viewChildによるビュークエリ