Question

假设我有一个无序列表

<div>
     <ul class="data-container">
            <li #H1>00</li>
            <li #H2>01</li>
            <li #H3>02</li>
            <li #H4>03</li>
            <li #H5>04</li>
            ...
        </ul>
    </div>

使用ViewChild基于它的局部变量获取元素的最佳方法是什么，然后检索它的值并给它一个特殊的类（比如class =“active”）

我可以在这里使用过滤器或查找功能吗？

另外，假设我想选择其中一个项目，有没有比使用(click)="SelectElement()"更好的方法？

Answer 1

您可以创建一个LiDirective来标记所有LI。之后，您可以使用我的QueryList提供的所有API，如find，filter，reduce，toArray ...

  @Directive({
    selector:'li'
  })
  export class LiDirective{}

  @Component({
    selector: 'my-app',
    template: `
      <div>
        <h2>Hello {{name}}</h2>

        <div>
       <ul class="data-container">
              <li>00</li>
              <li #H2>01</li>
              <li #H3>02</li>
              <li #H4>03</li>
              <li #H5>04</li>
          </ul>
      </div>
      </div>
    `,
  })
  export class App {
    @ViewChildren(LiDirective, {read:ElementRef}) lis: QueryList<any>;
    name:string;
    constructor(private renderer: Renderer2) {
      this.name = `Angular! v${VERSION.full}`
    }

    ngAfterViewInit() {
      let second = this.lis.toArray()[2];
      this.renderer.setStyle(second.nativeElement, 'color', 'blue');
    }
  }

Angular2 - 获取DOM中的特定元素并更改其类

1 个答案: