Question

在我的指令中，我有以下内容，通常会检测图像的正确高度。然而，如果没有超时的话，它很少有用。有更可靠的方法吗？

import {Directive, ElementRef, Renderer} from '@angular/core';


    @Directive({
        selector: '[custom-header]', // Attribute selector
    })
    export class CustomHeader {

        header: any;
        headerHeight: any;

        constructor(public element: ElementRef, public renderer: Renderer) {
            // console.log('Hello CustomHeader Directive');
        }


        ngAfterContentInit() {

            var test = this.element.nativeElement;
            setTimeout(function () {
                var content = test.getElementsByClassName('header-image')[0];
                alert(content.clientHeight);
            }, 600);

        }

    }

并在组件视图中（我正在使用Ionic）;

<ion-header class="header" custom-header id="header">
    <a  (click)="goToRoot()" ><img class="header-image" src="assets/img/topBar-iPad.png" alt=""/></a>
</ion-header>

Answer 1

这可能适合你

<img class="header-image" src="assets/img/topBar-iPad.png" alt="" 
    #me (load)="headerHeight = me.clientHeight"/>

Angular.js Dom渲染需要超时来检测元素高度

1 个答案: