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

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

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

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

но в angular 2.0..

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

Ответ 1

Обновление

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

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

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

Обновление Кажется, это способ Angular2

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

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

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

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

Оригинал

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

Ответ 2

Как Angular2 Версия 2.0.0-beta.17.

Директивы атрибутов в 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.

Ответ 3

По состоянию 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

Ответ 4

Я не рекомендую прямой доступ DOM из Angular, но у вас есть 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

Ответ 5

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

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

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

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

<p #p1></p>

К нему должен обратиться соответствующий файл-копия .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;";
  }

}