angualr如何获取for循环包括的img标签的dom

可以使用Angular的ViewChild装饰器来获取for循环包括的img标签的DOM。

首先，在组件中声明一个ViewChild属性来引用DOM元素：

@ViewChild('myImg') myImg: ElementRef;

其中，`myImg`是一个本地变量，它需要在模板中定义。比如：

<div *ngFor="let img of images">
  <img #myImg src="{{img.src}}" alt="{{img.alt}}">
</div>

在上面的代码中，我们在img标签上定义了一个名为`myImg`的本地变量。

然后，在组件类中，我们可以使用`ngAfterViewInit`生命周期钩子来获取DOM元素：

ngAfterViewInit() {
  console.log(this.myImg.nativeElement);
}

在这个例子中，我们使用`nativeElement`属性来获取原始的DOM元素。我们可以使用这个元素来执行任何DOM操作。

相关问题

angualr如何获取双重for循环包括的img标签的dom

在Angular中，可以使用以下方式获取双重for循环包括的img标签的dom：

1. 使用ViewChild获取子组件的dom元素

在父组件中，使用ViewChild装饰器获取子组件中的img元素。假设子组件的选择器为child-component，代码如下：

import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  template: `
    <div *ngFor="let item1 of items1">
      <div *ngFor="let item2 of items2">
        <child-component [src]="item2.imgUrl"></child-component>
      </div>
    </div>
  `
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  items1 = [{}, {}, {}];
  items2 = [{imgUrl: 'img1.jpg'}, {imgUrl: 'img2.jpg'}, {imgUrl: 'img3.jpg'}];

  ngAfterViewInit() {
    console.log(this.childComponent.imgElements);
  }
}

在子组件中，使用@ViewChild装饰器获取img元素，代码如下：

import { Component, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-child-component',
  template: '<img *ngIf="src" [src]="src">',
})
export class ChildComponent implements AfterViewInit {
  imgElements: HTMLImageElement[] = [];

  constructor(private elRef: ElementRef) {}

  ngAfterViewInit() {
    this.imgElements = this.elRef.nativeElement.querySelectorAll('img');
  }

  set src(value: string) {
    this.elRef.nativeElement.querySelector('img').src = value;
  }
}

2. 使用ngAfterViewInit获取dom元素

在父组件的ngAfterViewInit生命周期钩子中，使用document.querySelectorAll方法获取所有的img元素。代码如下：

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  template: `
    <div *ngFor="let item1 of items1">
      <div *ngFor="let item2 of items2">
        <<img *ngIf="item2.imgUrl" [src]="item2.imgUrl">
      </div>
    </div>
  `
})
export class ParentComponent implements AfterViewInit {
  ngAfterViewInit() {
    const imgElements = document.querySelectorAll('img');
    console.log(imgElements);
  }
}

在一个组件内，angualr如何获取双重for循环包括的img标签的dom

可以使用`ViewChild`来获取包含这些img标签的DOM元素。

首先，在组件类中定义一个视图子元素引用变量，如下所示：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div #myDiv>
      <div *ngFor="let item of items">
        <div *ngFor="let img of item.images">
          <img src="{{img.url}}">
        </div>
      </div>
    </div>
  `
})
export class MyComponent {
  @ViewChild('myDiv') myDiv: ElementRef;
  
  items = [
    {
      images: [
        {url: 'https://example.com/image1.jpg'},
        {url: 'https://example.com/image2.jpg'}
      ]
    },
    {
      images: [
        {url: 'https://example.com/image3.jpg'},
        {url: 'https://example.com/image4.jpg'}
      ]
    }
  ];
}

在这个组件中，我们定义了一个名为`myDiv`的`ViewChild`，它会引用`<div>`元素。我们还定义了一个`items`数组，其中包含包含图片的对象。这个组件使用`*ngFor`指令来循环遍历这个数组，并在每个对象中使用`*ngFor`指令来遍历包含的图片数组。每个图片都是一个`<img>`标记，其中`src`属性绑定到对象中的`url`属性。

在组件类中，我们可以通过`myDiv.nativeElement`属性来访问`<div>`元素的本机DOM对象。我们可以使用这个对象来查找包含的所有`<img>`元素，如下所示：

ngAfterViewInit() {
  const imgEls = this.myDiv.nativeElement.querySelectorAll('img');
  console.log(imgEls);
}

在这个例子中，我们在`ngAfterViewInit`生命周期钩子中访问了`myDiv`元素的本机DOM对象，并使用`querySelectorAll`方法查找所有的`<img>`元素。我们将它们存储在`imgEls`变量中，并使用`console.log`方法将它们输出到控制台。