Показать и скрыть элементы, основанные на том, есть ли переполнение x (горизонтальная прокрутка) в Angular 8 - PullRequest
Новая
       29

Показать и скрыть элементы, основанные на том, есть ли переполнение x (горизонтальная прокрутка) в Angular 8

0 голосов
/ 22 октября 2019

У меня угловое приложение. В строке меню я отображаю путь текущего routerLink. Который в некоторых частях приложения может стать довольно широким. Настолько широкий, что создает горизонтальную прокрутку. То, что я хотел бы сделать, это скрыть этот путь, как только появляется прокрутка, и показать вместо него другой элемент (это будет происходить на меньших экранах). Не уверен, что я должен делать это в чистом CSS программно в файле ts.

Так что я в основном хочу удалить 'someclass', когда есть overflow-x, и вместо этого показать 'whenthereisoverflow'. Я хочу переместить путь ссылки на новую панель инструментов при переполнении.

Я не хочу использовать медиазапросы или решения similair, поскольку ширина пути может варьироваться в зависимости от того, где вы находитесь в приложении. 

<mat-toolbar>
 <div class="someclass">
    <ul>
        <li>
            <a [routerLink]="link.url">
                {{ link.url }}
            </a>
        </li> 
    </ul>
  </div>

<div>Some other content</div>
 </mat-toolbar>


<mat-toolbar class="whenthereisoverflow">
 <div>
    <ul>
        <li>
            <a [routerLink]="link.url">
                {{ link.url }}
            </a>
        </li> 
    </ul>
  </div
 </mat-toolbar>

Ответы [ 2 ]

0 голосов
/ 22 октября 2019

Это легко сделать, проверив, не переполнено ли содержимое div. Для этого используйте следующий фрагмент:

comp-1.component.html 

<mat-toolbar>
    <div id="divToCheck">
        <div id="divToModify">
            <!--content-->
        </div>
    </div>
</mat-toolbar>

comp-1.component.ts 

checkOverflowing() {
    const element = document.getElementById('divToCheck');

    const curOverflow = element.style.overflow;

    if (!curOverflow || curOverflow === 'visible') {
      element.style.overflow = 'hidden';
    }

    const isOverflowing = element.clientWidth < element.scrollWidth || element.clientHeight < element.scrollHeight;

    element.style.overflow = curOverflow;

    if (isOverflowing) {
      document.getElementById('divToModify').classList.add('someclass');
    } else {
      document.getElementById('divToModify').classList.add('whenthereisoverflow');
    }

  }

это проверит, не переполнен ли divToCheck, и добавит соответствующий класс к divToModify, как вы пожелаете.

Надеюсь, это поможет!

Удачи!

0 голосов
/ 22 октября 2019

Попробуйте это: 

p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<a href="#"><p>skdjfhksjdfhksjd fhksdjfhksdjfh ksjdhfksjdfhskdjfhs skdjfhsdfk skdjfhksjdfhksjd fhksdjfhksdjfh ksjdhfksjdfhskdjfhs skdjfhsdfk</p></a>
...