Question

我是Angular4的新手，但我正在尝试使用AngularJs的知识创建一个项目。我创建了一个指令，它根据小数百分比*元素的宽度调整元素的大小。所以，如果我有6个这样的项目：

<div class="row">
    <div class="col-md-12">
        <ul class="answers row">
            <li class="answer col-xs-12 col-sm-6 col-md-4">
                <div>
                    <a href="#" [bzResize]="resizeMultipler">
                        <i class="icon"></i>
                    </a>
                </div>
            </li>
            <li class="answer col-xs-12 col-sm-6 col-md-4">
                <div>
                    <a href="#" [bzResize]="resizeMultipler">
                        <i class="icon"></i>
                    </a>
                </div>
            </li>
            <li class="answer col-xs-12 col-sm-6 col-md-4">
                <div>
                    <a href="#" [bzResize]="resizeMultipler">
                        <i class="icon"></i>
                    </a>
                </div>
            </li>
            <li class="answer col-xs-12 col-sm-6 col-md-4">
                <div>
                    <a href="#" [bzResize]="resizeMultipler">
                        <i class="icon"></i>
                    </a>
                </div>
            </li>
            <li class="answer col-xs-12 col-sm-6 col-md-4">
                <div>
                    <a href="#" [bzResize]="resizeMultipler">
                        <i class="icon"></i>
                    </a>
                </div>
            </li>
            <li class="answer col-xs-12 col-sm-6 col-md-4">
                <div>
                    <a href="#" [bzResize]="resizeMultipler">
                        <i class="icon"></i>
                    </a>
                </div>
            </li>
        </ul>
    </div>
</div>

我希望它们能正确对齐，因为链接是应用了resize指令的链接。该链接具有CSS以使其成为块元素。 resize指令如下所示：

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

@Directive({
  selector: '[bzResize]'
})
export class ResizeDirective {
  @Input() bzResize: number;

  constructor(private _renderer: Renderer, private _element: ElementRef) { 
  }

  ngAfterViewInit() {
    setTimeout(() => this.resize(this.bzResize));
  }

  @HostListener('window:resize', ['$event'])
  onResize(e)   {
    setTimeout(() => this.resize(this.bzResize), 500);
  };

  //////////////////////////////////////////////////

  private resize(multiplier) {
    var element = this._element.nativeElement;
    var width = element.clientWidth; 
    this._renderer.setElementStyle(element, 'height', width * multiplier + 'px');
  };
}

我得到的问题并不总是发生，只是在某些情况下，但它很烦人。以下是发生的事情的屏幕截图：

正如您所看到的，有一个元素脱节。在AngularJs中，您必须添加$timeout来修复此类问题，以便在DOM完成加载后应用代码。我在ngAfterViewInit方法中有这个，但它仍然会发生。

有谁知道如何解决这个问题？

引导程序中的Angular4 resize指令未正确对齐

0 个答案: