@ViewChild と @ViewChildren を使って要素を選択する

Angular コンポーネントテンプレート内の要素を選択する

テンプレート変数は、テンプレート内の要素に名前を付けるための方法です。 これにより、コンポーネントクラスから要素にアクセスすることができます。

<div #myElement>Hello World</div>

export class MyComponent {
  @ViewChild('myElement') elementRef: ElementRef;

  ngAfterViewInit() {
    console.log(this.elementRef.nativeElement.textContent); // "Hello World"
  }
}

querySelector は、テンプレート内の要素を CSS セレクターを使用して選択する方法です。

<div class="my-class">Hello World</div>

export class MyComponent {
  ngOnInit() {
    const element = document.querySelector('.my-class');
    console.log(element.textContent); // "Hello World"
  }
}

<div class="my-class">Hello World</div>
<div class="my-class">Goodbye World</div>

export class MyComponent {
  ngOnInit() {
    const elements = document.querySelectorAll('.my-class');
    for (const element of elements) {
      console.log(element.textContent);
    }
  }
}

ng-content は、コンポーネントテンプレート内に投影されたコンテンツにアクセスする方法です。

<my-component>
  <div>Hello World</div>
</my-component>

@Component({
  selector: 'my-component',
  template: `
    <div>
      <ng-content></ng-content>
    </div>
  `
})
export class MyComponent {
  @ContentChild('myContent') contentRef: ElementRef;

  ngAfterViewInit() {
    console.log(this.contentRef.nativeElement.textContent); // "Hello World"
  }
}

@ViewChild と @ViewChildren は、コンポーネントテンプレート内の要素を直接参照する方法です。

<div #myElement>Hello World</div>

export class MyComponent {
  @ViewChild('myElement') elementRef: ElementRef;

  ngAfterViewInit() {
    console.log(this.elementRef.nativeElement.textContent); // "Hello World"
  }
}

テンプレート構文を使用して、要素を条件付きで表示したり、ループ処理したりすることができます。

<div *ngIf="showElement">Hello World</div>

export class MyComponent {
  showElement = true;
}

これらの方法のどれを選択するかは、状況によって異なります。 テンプレート変数はシンプルで使いやすいですが、querySelector や querySelectorAll の方が柔軟性があります。 ng-content は、コンポーネントテンプレート内に投影されたコンテンツにアクセスする必要がある場合に便利です。 @ViewChild と @ViewChildren は、コンポーネントテンプレート内の要素を直接参照する必要がある場合に便利です。 テンプレート構文は、要素を条件付きで表示したり、ループ処理したりする必要がある場合に便利です。

Angular コンポーネントテンプレート内の要素を選択するには、いくつかの方法があります。 状況に応じて最適な方法を選択する必要があります。

テンプレート変数

<div #myElement>Hello World</div>

export class MyComponent {
  @ViewChild('myElement') elementRef: ElementRef;

  ngAfterViewInit() {
    console.log(this.elementRef.nativeElement.textContent); // "Hello World"
  }
}

querySelector

<div class="my-class">Hello World</div>

export class MyComponent {
  ngOnInit() {
    const element = document.querySelector('.my-class');
    console.log(element.textContent); // "Hello World"
  }
}

querySelectorAll

<div class="my-class">Hello World</div>
<div class="my-class">Goodbye World</div>

export class MyComponent {
  ngOnInit() {
    const elements = document.querySelectorAll('.my-class');
    for (const element of elements) {
      console.log(element.textContent);
    }
  }
}

ng-content

<my-component>
  <div>Hello World</div>
</my-component>

@Component({
  selector: 'my-component',
  template: `
    <div>
      <ng-content></ng-content>
    </div>
  `
})
export class MyComponent {
  @ContentChild('myContent') contentRef: ElementRef;

  ngAfterViewInit() {
    console.log(this.contentRef.nativeElement.textContent); // "Hello World"
  }
}

@ViewChild と @ViewChildren

<div #myElement>Hello World</div>

export class MyComponent {
  @ViewChild('myElement') elementRef: ElementRef;

  ngAfterViewInit() {
    console.log(this.elementRef.nativeElement.textContent); // "Hello World"
  }
}

テンプレート構文

<div *ngIf="showElement">Hello World</div>

export class MyComponent {
  showElement = true;
}

これらのサンプルコードは、Angular コンポーネントテンプレート内の要素を選択するさまざまな方法を理解するのに役立ちます。

Angular コンポーネントテンプレート内の要素を選択するその他の方法

getElementById は、ID を指定して要素を選択する方法です。

<div id="myElement">Hello World</div>

export class MyComponent {
  ngOnInit() {
    const element = document.getElementById('myElement');
    console.log(element.textContent); // "Hello World"
  }
}

getElementsByClassName は、クラス名