Использование HTML-ссылки #id в Angular 6 - PullRequest
Новая
       46

Использование HTML-ссылки #id в Angular 6

0 голосов
/ 13 июня 2018

Я работаю с проектом Angular 6, в котором я отключил / удалил hash-location-стратегии, который удаляет # из URL.

из-за этого изменения ссылка имеет: 

<li routerLinkActive="active">
   <a [routerLink]="['/settings']">Contact Settings</a>
   <ul class="child-link-sub">
      <li>
         <a href="#contactTypes">Contact Types</a>
      </li>
   </ul>
</li>

больше не работает, он просто пропускает URL текущих компонентов и ставит #contactTypes после localhost.

Я нашел эту ссылку , которая должна решить проблему, используя 

<a [routerLink]="['/settings/']" fragment="contactTypes" >Contact Types</a>

, котораяпомещает #contactTypes в конец URL-адреса, но не перемещается в верхнюю часть браузера.

Источник: https://github.com/angular/angular/issues/6595

Ответы [ 5 ]

0 голосов
/ 15 августа 2019

По причинам доступности мне пришлось перейти по ссылке в начале документа, чтобы предоставить прямой доступ к контенту пользователю с помощью программы чтения с экрана, пропуская таким образом части страницы, повторяющиеся от страницы к странице.

Поскольку мне нужно, чтобы ссылка оставалась фокусируемой (желательно с сохранением атрибута href), поскольку я фактически находился вне корня приложения или любого компонента (решение по-прежнему работает внутри компонента), для этого я использовал простой старый добрый способ html и javascript:

<a href="./#content"
     onclick="event.preventDefault(); location.hash='content';"
     class="content-shortcut"
     title="Access page content directly"
     i18n-title
     aria-label="Access page content directly"
     i18n-label>Access page content directly</a>
  <style>
    .content-shortcut {
      position: absolute;
      opacity: 0;
      height: 0px;
      font-size: 1px;
    }

    .content-shortcut:focus,
    .content-shortcut:active {
      position: relative;
      opacity: 1;
      height: auto;
      font-size: 1em;
      display: block;
      color: black;
      background: white;
    }

  </style>
0 голосов
/ 08 января 2019

использование ngx прокрутка страницы 

 <a pageScroll href="#awesomePart">Take me to the awesomeness</a>
 <h2 id="awesomePart">This is where the awesome happens</h2>
0 голосов
/ 08 сентября 2018

Вам необходимо использовать стратегию маршрутизации хэша, чтобы включить прокрутку хэша.

вам нужно дать второй аргумент в виде объекта, подобного RouterModule.forRoot ([], {useHash: true} }. Это будет работать.

0 голосов
/ 09 октября 2018

Angular 6.1 поставляется с опцией anchorScrolling, которая находится в модуле маршрутизатора ExtraOptions.Как указано в anchorScrolling определении :

Настраивает, следует ли маршрутизатору прокручивать элемент, когда в URL-адресе есть фрагмент.

'disabled' -ничего не делает (по умолчанию).

'enabled' - прокручивает до элемента.Эта опция будет использоваться по умолчанию в будущем.

Прокрутка привязки не происходит в «popstate».Вместо этого мы восстанавливаем сохраненную позицию или прокручиваем ее до верха.

Вы можете использовать ее следующим образом: 

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  // ...any other options you'd like to use
};

// then just import your RouterModule with these options

RouterModule.forRoot(MY_APP_ROUTES, routerOptions)
0 голосов
/ 18 июля 2018

Я искал подобное решение и пытался использовать пакет ngx-scroll-to и обнаружил, что он не работает в последней версии angular, поэтому решил поискать другой вариант и обнаружил, что мы можемиспользуйте scrollIntoView

HTML-код: 

<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>

Ц-код: 

  scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }
...