如何使用angular 2访问dom选择器？

Question

我有一个简单的脚本，它将添加一个类到dom选择器。

showParent() {
  console.log('show parent');
  $("seasonsGrid").toggleClass("grid-layout");
}

无论这些dom节点是标签还是命名元素，angular如何允许您将它们作为目标？

在本例中，$("seasonsGrid")是对

@Component({ selector: 'seasonsGrid', ...

但是知道如何使用标记和命名el遍历dom将是有用的。

为此，ng2的等价物是什么？

var seasonsGrid = $(seasonsGrid);

Answer 1

您可以使用ElementRef/Renderer来获取组件元素

import {Component, View, ElementRef} from 'angular2/angular2';
import {NgClass} from 'angular2/common'; //import when you wanted to use ngClass
import {Renderer} from 'angular2/core';
@Component({ selector: 'seasonsGrid', ...})
export class MyComponent {
   let el: any; 
   let componentElement:any;
   constructor(private elementRef: ElementRef, private renderer: Renderer){
      //el = elementRef.nativeElement;
      componentElement = renderer.selectRootElement(); //will have component root element
   }

   ngAfterViewInit() {
       console.log(el); //nativeElement to process
       console.log(componentElement); //nativeElement to process
   }
}

但是在您的例子中，您可以考虑在[ngClass]="{className: expression}"这样的地方使用ngClass指令

Answer 2

我必须做更多的功课，但是从它的外观上看，

2要复杂得多，如果只需要初始化元素上的切换类的状态。jquery为1行

Angular 2是一个数据驱动的反应式框架。我鼓励您拥抱Angular-think，而不是考虑选择器和DOM操作代码，这与jQuery-think有很大不同。

如果要更改数据驱动框架中的类，首先需要在组件模板中以声明方式将某些数据绑定到该元素的类属性。然后，要更改类，只需更改绑定数据。正如其他人已经提到的，NgClass是实现这一目标的方法。

类似地，组件逻辑不应该操作DOM (即，它不应该调用toggleClass()之类的东西)，而应该更改数据或发出事件(直到它的父级)。

当角度变化检测运行时，它将注意到数据变化，并更新DOM (或本机UI)或将数据变化传播到父组件(对于发出的事件)或子组件(对于输入数据属性变化)。

Angular-think完全是关于数据驱动的变化。而角度2比角度1推动我们走得更远。(这是一件好事。)

Answer 3

这可能不能回答这个问题，因为我对NG2非常陌生(大约三天)，但我在文档中找到了一些东西：

<div [class.isStopped] = "isStopped"></div>
<div [style.color] = "isStopped ? 'red' : 'blue'"></div>
<button [attr.aria-label] = "ok"></button>
<div [ngClass] = "{selected:isSelected}"></div>

就像ngStyle和ngModel一样，ngClass也是一个指令性属性。在很大程度上，他们只是去掉了仪表盘。

当我们在进行属性绑定时：

<img [src] = "vehicle.imageUrl" />
<vehicle-detail [vehicle] = "currentVehicle"></vehicle-detail>

您将组件(代码)绑定到模板，因此在这种情况下，不需要在代码中获取元素并更改它，只需更改组件(视图模型)即可。