Угловой 2.x выбор DOM элемента

Question

Я знаю, что это должно быть легко, но угловая 2,0 не имеет много примеров еще ..

В одном из моих компонентов в некоторых случаях мне нужно добавить класс на моем теле тега. Но мое приложение бутстрапированная глубже, чем тело, так что мне нужно что-то вроде

angular.element('body').addClass('fixed'); 

но в угловых 2,0 ..

Кстати, я знаю, что может как-то самонастройки моего приложения, чтобы включить body тега, но я думаю, что в в некоторых других случаях я должен был бы выбрать некоторые элементы в любом случае, так что мне нужно решение, как сделать эту простую задачу - «выбрать элемент и добавить класс к ней»

Answer 1

Update

I Не уверен, что DOM на самом деле все еще поддерживается в RC. Соответствующие заявления не очень ясны. Что-то вроде

DOM предназначено только для внутреннего использования. Либо войдите в DOM напрямую, либо используйте собственный рендеринг.

Я не видел, как может быть реализован пользовательский рендерер или как обеспечить реализацию в зависимости от текущей платформы (webworker, server, DOM thread).

Update Это, кажется, путь Angular2

import { DOM } from 'angular2/src/platform/dom/dom_adapter'; 

DOM.addClass(DOM.query("body"), 'fixed'); 

Импорт из .../src/... на свой страх и риск. .../src/... считается частной версией, и вы не можете ожидать каких-либо гарантий, что API не изменится без уведомления.

Я пробовал его в Дарте, и он отлично работает (не уверен, что импорт TS выше правилен, хотя). В Dart DOM экспортируются package:angular2/angular2.dart

Оригинальных

Если вы хотите получить доступ к элементу DOM, который находится за пределы вашего углового корня приложения, просто использовать document.querySelector(), нет необходимости привлекать Угловую.

Answer 2

Я не рекомендую прямой доступ с DOM от углового, но у вас есть DOM-крючок через ElementRef вашего компонента. Как только у вас есть доступ к нему, вы можете использовать его напрямую или с помощью jquery или любого другого метода манипуляции с DOM. Я включил пример использования jquery для запуска общих запросов. Если вы всегда собираетесь использовать тег body, вам действительно не нужен ElementRef, но он полезен для чего-то, что относится к корню компонента.

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

declare var jQuery:any; 

@Component({ 
    selector: 'jquery-integration', 
    templateUrl: './components/jquery-integration/jquery-integration.html' 
}) 
export class JqueryIntegration implements OnInit { 
    elementRef: ElementRef; 

    constructor(private elementRef: ElementRef) { 
    } 

    ngOnInit() { 
     jQuery(this.elementRef.nativeElement).find('.moving-box').draggable({containment:'#draggable-parent'}); 
    } 
} 

Больше информации здесь: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

Демо: http://www.syntaxsuccess.com/angular-2-samples/#/demo/jquery

Answer 3

По Angular2 версии 2.0.0-beta.17.

Attribute Directives в Angular2 сделают это для вас красиво.

См. Этот plunk, написанный на языке TypeScript. Это делает то, что вы хотите красиво.

Директива файл my-highlight.ts имеет следующую строку:

this.renderer.setElementClass(this.element, "red", true); 

Это задает класс CSS на элементе.

Хотя template.html имеет фактический элемент, который украшен с директивой [myHighlight]:

<p [myHighlight]>Mouseover to highlight me!</p> 

Это, мне, обеспечивает наименьшую взломать иш ответ на вопрос без какой-либо зависимости от jqLite.

Answer 4

По angular 2.4 вы должны вводить DOCUMENT и не взаимодействуют с любым адаптером:

import { Component, Inject } from '@angular/core'; 
import { DOCUMENT } from '@angular/platform-browser'; 

@Component({}) 
export class MyClass { 

    constructor (@Inject(DOCUMENT) private document) { } 

    doSomething() { 
     this.document.someMethodOfDocument(); 
    } 
} 

Дальнейшее чтение: https://github.com/angular/angular/issues/8509

Answer 5

DOM Манипуляции в угловых 2/4 приложения

Чтобы манипулировать DOM в приложениях Angular 2/4, нам необходимо implement метод ngAfterViewInit() of AfterViewInit. Метод ngAfterViewInit() вызывается, когда привязки директив для детей были проверены в первый раз. Другими словами, , когда вид изначально отображается.

@ViewChild предоставляет доступ к nativeElement. Не рекомендуется обращаться к nativeElement внутри ngAfterViewInit(), так как он не является браузером. Кроме того, он не поддерживается веб-работниками. Веб-работники никогда не узнают, когда обновляется DOM.

Правильный способ заключается в использовании renderer. Средство визуализации необходимо вставить в конструктор компонента. Мы должны обеспечить id ссылку на HTML элемент на вид что-то вроде этого:

<p #p1></p>

Он должен быть доступ к соответствующему coponent .ts файла, что-то вроде этого:

export class SampleComponent implements AfterViewInit { 

    @ViewChild("p1") p1; 

    constructor(private renderer: Renderer2) //Renderer set to be depreciated soon 
    { } 

    ngAfterViewInit() { 

    //recommended DOM manipulation approach 
    this.renderer.setStyle(this.p1.nativeElement, //setElementStyle for soon to be depreciate Renderer 
     'color', 
     'red'); 

    //not recommended DOM manipulation approach 
    //this.p1.nativeElement.style = "color:blue;"; 
    } 

}