Как автоматически проскролить до таблицы?

Question

[Ivan Stroykin]

Доброго времени суток,

Наткнулся на то, что на ноутбуках, или маленьких экранах, некоторые формы занимают много места, и при запросе информации таблица с данными появляется где-то внизу. Решил сделать, чтобы при появлении таблицы страница скроллилась до неё. Но вот что-то не получается. Подготовил место Plunker

Пробовал через this.el.nativeElement.scrollTop = 0; но получаю undefined

Answer 1

[Алексей Зуев]

Есть много вариантов, вот к примеру один из вариантов

Определяем template reference variable

<table *ngIf="view" #table>

Следим за появлением таблицы на странице и скроллим к ней в случае появления

@ViewChild('table') 
set tableEl(el: ElementRefl) {
  if(el) {
    el.nativeElement.scrollIntoView();
  }
}

Живой пример

Comments

[Ivan Stroykin]

Такой вариант не будет работать с такой конструкцией?
<test *ngIf="view" #table><test>
Только что попробовал, ничего не дало :(

[Алексей Зуев]

Иван Стройкин: Что из себя представляет test? В этом случае будет инстанция компонента Test в сеттер передаваться

[Алексей Зуев]

Иван Стройкин: Чтобы передавать ElementRef добавьте { read: ElementRef }

[Алексей Зуев]

@ViewChild('table', { read: ElementRef })

[Алексей Зуев]

Иван Стройкин: https://plnkr.co/edit/AhPZVKZRAB7snbradR3e?p=preview

[Ivan Stroykin]

Алексей Зуев: Во, так работает ) Спасибо )) Надо придумать как это вынести в директиву, чтобы в каждом компоненте не прописывать :)
Можно узнать вы обучались? На все вопросы по Angular ответ у Вас найдется :)

[Алексей Зуев]

Иван Стройкин: Вот вам директива https://plnkr.co/edit/YzsEKpnO5lfO7ViqkrgC?p=preview

[Алексей Зуев]

Иван Стройкин: Я вот ваши вопросы и ответы читаю, так и научился потихоньку)

[Ivan Stroykin]

Алексей Зуев: то есть мы таким вот образом еще и друг другу помогаем?)
Спасибо большое :)

[Алексей Зуев]

Иван Стройкин: Конечно, что там дальше будем изучать?

[Ivan Stroykin]

Алексей Зуев: нуу, можно шапочку у таблиц фиксировать при прокрутке :D

[Алексей Зуев]

Иван Стройкин: Идея такая может быть https://plnkr.co/edit/9K0zVfI1o04ZS33ZUI2W?p=preview

[Ivan Stroykin]

Алексей Зуев: там фиксированная высота таблицы, что в моем случае не подойдет. Идеал, это таблицы в confluence. Там нету скролла внутри таблицы. А когда шапка подходит к верхней границы body (или toolbar) фиксируется до момента. пока таблица не будет прокручена :)

[Алексей Зуев]

Иван Стройкин: https://plnkr.co/edit/0YTaBTnQfWtE36vxwx2A?p=preview

[Ivan Stroykin]

Алексей Зуев: так быстро, еще и отдельной директивой? Это идеально :) Так на Ваших примерах сам по тихоньку черпаю хорошие знания)
Кстати, в предыдущем моем вопросе Вы так в ответ и не написали, чтобы выбрал правильным. Нужно это исправить

[Алексей Зуев]

Иван Стройкин: Там вопрос по формам был?

[Ivan Stroykin]

Алексей Зуев: да да, он самый

[Алексей Зуев]

Иван Стройкин: Мне не понравилось, что вы решили много всего передавать. Чтобы построить хорошую модель для angular form нужно сначала на листочке начеркать какой объект вы хотите видеть в итоге. А вы создаете группу внутри clockpicker контрола и зачем-то сверху уже имеете какие-то контролы, которые тоже передаете.

[Ivan Stroykin]

Алексей Зуев: а, я кстати взял Вашу идею за основу и переписал немного. Я решил вместо передачи целой группы передавать только контрол

<clockpicker [placeholder]="'Время #1'" [control]="form.controls['time1']"></clockpicker>
<clockpicker [placeholder]="'Время #2'" [control]="form.controls['time2']"></clockpicker>

В самом компоненте clockpicker:

<md-input-container>
  <input mdInput type="text" [formControl]="control" [placeholder]="placeholder">
  <span mdSuffix><md-icon>access_time</md-icon></span>
  <md-error *ngIf="control.hasError('required')">Обязательное поле</md-error>
  <md-error *ngIf="control.hasError('validateTime')">Неправильное время</md-error>
</md-input-container>

[Алексей Зуев]

Иван Стройкин: Вот это мне больше нравится. Я изначально не понял, зачем вам группа в кастомном контроле. Группы делают для связанных контролов чтобы можно было работать с валидацией группы и отсылать на сервер объект, но если у вас clock-picker, то там только одно значение, это не объект

[Ivan Stroykin]

Алексей Зуев: вот такое обсуждение нужно в том вопросе и выбор Вашего ответа :)

Алексей Зуев: кстати, что-то туплю, не могу передать fixed и width (главное width) для "thead > tr", потому что пока не разобрался полностью в dattable от material design, использую datatable от primang, и у них вставка таблицы такая:

<p-dataTable>
  <p-column [header]="Test 1" [field]="'test1'"></p-column>
  <p-column [header]="Test 2" [field]="'test2'"></p-column>
</p-dataTable>

И тут я могу fixedHeader прикрепить только к , а width нужно для tr назначить, которая в thead находится :)

[Алексей Зуев]

Иван Стройкин: Там вроде ui-datatable-thead есть

[Ivan Stroykin]

Алексей Зуев: да, есть класс ui-datatable-thead для thead, но если применять к нему есть один баг интересный. Если начать прокручивать страницу по тихоньку, то начнется бесконечный цикл добавления/удаления класса fixed :D
А вот для tr которая в thead > tr, ну или .ui-datatable-thead > tr, такого бага не обнаружилось

[Ivan Stroykin]

Алексей Зуев: там фишка в том, что:

@HostBinding('style.width') get width() {
        return this.fixed ? this.el.parentNode.offsetWidth + 'px' : 'auto';
    }

Добавляет style.width в p-datatable. А нужно в tr которая в thead, потому что иначе граница справа уходит до самого края ))

[Алексей Зуев]

Иван Стройкин: Plunker нужен)

[Ivan Stroykin]

Алексей Зуев: сейчас подготовлю )

[Ivan Stroykin]

Алексей Зуев: Plunker

[Алексей Зуев]

Иван Стройкин: https://plnkr.co/edit/i6Nnjghhn0O7lI7Q9jbA?p=preview

[Ivan Stroykin]

Алексей Зуев: ячейки расползаются)) ну это ладно, сам разберусь, там в стилях что-то. Спасибо большое))
Кстати, немного переписал Ваш вариант директивы ScrollToMeDirective. У меня сверху toolbar высотой 56px, и нужно было, чтобы блок не заходил за него, а scrollIntoView не дает возможности манипулировать с высотой. Получилось вот так:

window.scrollTo(0, this.elRef.nativeElement.getBoundingClientRect().top + pageYOffset - 56);

Хорошо?)

[Алексей Зуев]

Иван Стройкин: Вот здесь еще посмотрите https://github.com/angular/angular/blob/master/aio...

[Ivan Stroykin]

Алексей Зуев: понял почему расползаются ячейки. Такое работает только при table-layout: fixed; когда все ячейки одного размера. В моем же случае все ячейки разной ширины. Блин :)

[Ivan Stroykin]

Алексей Зуев: Сделал скролл до таблицы с анимацией)) - Plunker

[Ivan Stroykin]

Алексей Зуев: Вот так у меня ячейки расходятся) - Plunker

[Алексей Зуев]

Иван Стройкин: С анимацией - клево, только учтите, что вы setTimeout-ом вызываете кучу application.tick. Запустите это вне ангуляровской зоны

[Ivan Stroykin]

Алексей Зуев:

Запустите это вне ангуляровской зоны

А это как, не подскажите?

[Алексей Зуев]

Иван Стройкин: https://blog.thoughtram.io/angular/2016/02/01/zone...

[Ivan Stroykin]

Алексей Зуев: что-то я разницы не увидел, то ли не понял )

[Ivan Stroykin]

Алексей Зуев: я тут для оповещений делаю запрос через каждые 10 сек. (пока web-сокеты не поднял). Тоже через setTimeout(). Очень плохо?)

[Алексей Зуев]

Иван Стройкин: всё зависит от того, насколько большое у вас приложение и используете ли вы OnPush и detach

[Ivan Stroykin]

Алексей Зуев: проект в меру большой, проект на ~ 5.4 Мб при build --prod