Question

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

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

角度如何允许您定位这些dom节点，无论它们是标记还是命名元素？

在这种情况下$("seasonsGrid")是对

的引用

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

但知道如何使用标签进行dom遍历并命名为el，这将非常有用。

这个

的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指令将它放在[ngClass]="{className: expression}"

这样的地方

Answer 2

我必须做一些更多的作业，但从它的外观来看，如果仅仅为了初始化元素上的切换类的状态所需要的话，则角度2更复杂。 jquery是1行

Angular 2是一个数据驱动的反应框架。我没有考虑选择器和DOM操作代码，而是鼓励你接受Angular-think，这与jQuery-think完全不同。

如果要在数据驱动框架中更改类，首先将一些数据声明性地绑定到组件模板中该元素的类属性。然后，要更改类，只需更改绑定数据即可。正如其他人已经提到的那样，NgClass就是这样做的方式。

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

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

Angular-think是关于数据驱动的变化。 Angular 2比Angular 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>

ngClass是一个指令属性，就像ngStyle和ngModel一样。在大多数情况下，他们只是拿出破折号。

我们正在使用Property Bindings：

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

您将组件（代码）绑定到模板，因此在这种情况下，没有必要在代码中获取元素并更改它，只需更改Component（视图模型）。

如何使用角度2访问dom选择器

3 个答案: