Как получить ширину элемента (DOM) в Angular2

Я не знаю, как получить ширину из элемента хоста без доступа к nativeElement, но настройку можно выполнить следующим образом:

@HostListener('window:resize', ['$event.target']) 
onResize() { 
  this.resizeWorks();
}

@HostBinding('style.height.px')
elHeight:number;

private resizeWorks(): void {
  this.elHeight = this.el.nativeElement.width;
}

Если вы можете добавить элемент в свой шаблон компонентов, например

<div style="width: 100%;" #div (window:resize)="elHeight = div.getBoundingClientRect()">
  <!-- your template here -->
</div>

тогда это будет работать вообще без прямого доступа к DOM (но не после инициализации).

Я попробовал решение @GünterZöchbauer и усовершенствовал его. Вам не нужен HostListener, чтобы получить границы div. Как и в случае с «щелчком» или другим событием (событие) = «функция ()», эта функция будет запущена. Я надеюсь, что кто-то найдет это полезным.

<div #div (window:resize)="onResize(div.getBoundingClientRect())">
   <!-- your template here -->
</div>


onResize() { 
   this.resizeWorks();
}

@HostBinding('style.height.px') elHeight:number;

private resizeWorks(): void {
   this.elHeight = this.el.nativeElement.width;
}

(#div) - это переменная, необходимая для получения цели измерения. Это не обязательно должно быть то же имя, что и элемент, это может быть любое имя.

Еще один способ получить размеры элемента — использовать класс ElementRef из Angular Core, но тогда вам нужно найти тот дочерний элемент, у которого есть свойства ширины и высоты. Я использовал это в Angular 2 Maps, чтобы получить ширину и высоту контейнера, но я обнаружил, что с помощью этого метода мне нужно было найти в элементе дерева элементов, который имел эти свойства, и это был второй дочерний элемент корневого элемента. Это более грязно. ElementDimensions - это просто класс с высотой и шириной, который я сделал, чтобы содержать эти свойства.

<div (window:resize)="onResize()">
   <!-- your template here -->
</div>

private getContainerDimensions(): ElementDimensions{
    var rootElement = this.elementRef.nativeElement;
    var childElement = rootElement.firstElementChild;
    var contentElement =  childElement.firstElementChild;

    return {
        height:contentElement.clientHeight,
        width: contentElement.clientWidth
    };
}

Я проверил этот способ и просто работал! Кажется, что связывание сделало эту работу.

<div #foto [style.height.px]="foto.getBoundingClientRect().width / 2">

Вы можете получить ширину самого компонента, если для него определено свойство отображения (например, «блок» в приведенном ниже примере). Обратите внимание, что вы должны иметь возможность определить этот стиль (используя затенение дома):

:host {
    display:block;
}

Если вы не используете затенение дома (Ionic 2-3):

my-component {
    display:block;
}

Вот контроллер (представляющий ширину как наблюдаемую):

import {AfterViewInit, Component, ElementRef, HostListener, Input} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Component({
    selector: 'my-component',
    template: '{{$width|async}}',
    style: 'my-component {display: block;}'
})
export class MyComponent implements AfterViewInit {
    @Input() public gridWidth: number;
    private $width: Subject<number> = new Subject();

    constructor(private elementRef: ElementRef) {
    }

    public ngAfterViewInit(): void {
        this.emitWidth();
    }

    @HostListener('window:resize', ['$event.target'])
    public onResize(): void {
        this.emitWidth();
    }

    private emitWidth(): void {
        this.$width.next(this.getWidth());
    }

    private getWidth(): number {
        return this.getNativeElement().clientWidth;
    }

    private getNativeElement(): HTMLElement {
        return this.elementRef.nativeElement;
    }
}