Question

假设我有10个div元素，并且必须放在10个div中的特殊元素上。

首先，我想要持有一个具有属性的服务（名为＆＃39; location＆＃39;确定这个特殊元素应该是什么div元素。所以，这些div元素中的每一个都有一个模板：

<div [num] = "num"> 
   <div *ngIf = "num == service.location"> Special</div>
</div>

在这种情况下，每个div元素都必须从服务中读取location属性，这是低效的。

然而，我认为是否可以更有效地完成它。我想过把某种听众/观察者放在变量＆＃39; location＆＃39;每当它改变时，特殊元素将被放置在适当的元素内。在这种情况下，我可以用复杂的O（1）来做到这一点。

你知道任何可以帮助我做的角度技术吗？

Answer 1

你可以：

将特殊属性添加到特定div
之后查询所有这些div（使用虚拟子指令作为标记）

之后在ngAfterViewInit中找到一个具有特殊属性的文件。

@Directive({selector: '[child-directive]'})
export class ChildDirective {
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div child-directive>Hi</div>
      <div child-directive [attr.special]="test">special</div>
      <div child-directive>Hi</div>
    </div>
  `,
})
export class App implements AfterViewInit {
  @ViewChildren(ChildDirective, {read: ElementRef}) children: QueryList<ElementRef>;
  test = true;

  constructor() {
  }

  ngAfterViewInit() {
    const special = this.children.find(el=> {
      let native = el.nativeElement;
      if(native.getAttribute("special")) {
        return true;
      }
      else {
        return false;
      }
    });
    console.log(special);
  }
}

Angular4：如何根据变量值定位组件

1 个答案: