Home / Questions / 130430
Accepted
gmarsi
Asked: 2020-01-12 10:07:45 +0800 CST 2020-01-12 10:07:45 +0800 CST

使用Angular 4获取元素的宽度

  • 772

我有一个显示宽度为95%的元素的组件，因此根据屏幕的宽度，它会有一些测量值或其他值。

如何从我的组件中获取此元素的宽度？

这是该组件的代码：

模板网址 (HTML)

 <div id="main">
  <ul id="usersBox">
    <li>
      <a>
        <div>
          <img src="http://lorempixel.com/150/200/people/1" alt="">
          <div>
            <p>Lucas</p>
            <p>C#, Java, TS</p>
            <p>5 projects</p>
            <p>19 partners</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a>
        <div>
          <img src="http://lorempixel.com/150/200/people/2" alt="">
          <div>
            <p>
              Peter
            </p>
            <p>Javascript</p>
            <p>1 projects</p>
            <p>23 partners</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a>
        <div>
          <img src="http://lorempixel.com/150/200/people/3" alt="">
          <div>
            <p>
              Marian
            </p>
            <p>Python, PHP</p>
            <p>2 projects</p>
            <p>3 partners</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a>
        <div>
          <img src="http://lorempixel.com/150/200/people/4" alt="">
          <div>
            <p>
              Laura
            </p>
            <p>SQL, MongoDB</p>
            <p>0 projects</p>
            <p>1 partner</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a>
        <div>
          <img src="http://lorempixel.com/150/200/people/5" alt="">
          <div>
            <p>
              Marine
            </p>
            <p>C#, .NET, F#</p>
            <p>15 projects</p>
            <p>14 partners</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a>
        <div>
          <img src="http://lorempixel.com/150/200/people/6" alt="">
          <div>
            <p>
              Sandrah
            </p>
            <p>COBOL</p>
            <p>31 projects</p>
            <p>194 partners</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a>
        <div>
          <img src="http://lorempixel.com/150/200/people/7" alt="">
          <div>
            <p>
              Tiffany
            </p>
            <p>Scala, GO</p>
            <p>0 projects</p>
            <p>0 partners</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a>
        <div>
          <img src="http://lorempixel.com/150/200/people/8" alt="">
          <div>
            <p>
              Michael
            </p>
            <p>R, C, C++</p>
            <p>6 projects</p>
            <p>17 partners</p>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

样式网址 (CSS)

@import '../../scss/_mixins.scss';
@import '../../scss/_variables.scss';
@import '../../scss/_reset.scss';
@import '../../scss/_placeholders.scss';
@import '../../scss/_general.scss';
#main{
    width: 95%;
    height: 233px;
    padding: 100px 0px 0px 0px;
    margin: 0px 2.5% 0px 2.5%;
    overflow: auto;
    margin-bottom: 30px;
    ul#usersBox{
        display: table;
        white-space: nowrap;
        list-style: none;
        margin: 0 auto;
        li{
            display: table-cell;
            text-align: center;
            padding: 5px;
            a > div {
                width: 150px;
                height: 200px;
                position: relative;
                @include border-radius(5px);
                img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    @include border-radius(5px);
                }
                div{
                    width: 100%;
                    height: 50%;
                    bottom: 0;
                    left: 0;
                    position: absolute;
                    padding-top: 30px;
                    line-height: 3;
                    transition: 0.25s;
                    cursor: pointer;
                    text-overflow: hidden;
                    overflow: hidden;
                    background: $whitetransparent;
                    &:hover{
                        transition: 0.25s;
                        height: 100%;
                    }
                }
            }
        }
    }
}

零件

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

@Component({
  selector: 'app-explore',
  templateUrl: './explore.component.html',
  styleUrls: ['./explore.component.scss']
})
export class ExploreComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

即使这是一项仅在整个网络上的一个站点上执行的操作，是否建议使用自己的指令来执行此操作？

angular4

1 Answers

  1. Best Answer

    首先，如果您要在项目中或其他项目中多次使用指令，那么指令将是一个好主意。然后我给你两个选择，如果你只打算在这种情况下使用它，请使用该选项@ViewChild

    解决方案：

    直接在组件中

    探索Component.component.ts：

    export class ExploreComponent implements OnInit {
    constructor() { }

    @ViewChild('main')
    main: ElementRef;

    ngAfterViewInit() { //Recién en este punto tendrás acceso al valor
            console.log(this.main.nativeElement.offsetWidth);
    }

    ngOnInit() {
    }

}

    HTML

    <div #main id=main>
......
</div>

    指示：

    它在这里所做的是在控制台上打印尺寸，当鼠标进入元素时，这只是示例的触发器，您可以决定何时激活它。

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

@Directive({
  selector:"[ancho]",
})

export class WidthDirective{

  constructor(private el:ElementRef){

  }
  @HostListener('mouseenter') onMouseEnter(){
    console.log(this.el.nativeElement);

    console.log('Alto-->' + this.el.nativeElement.offsetHeight);  
    console.log('Ancho-->' + this.el.nativeElement.offsetWidth);    
  }
}
    • 1