Как сделать внутреннюю ссылку на go на элемент идентификатора другого компонента - Angular - PullRequest
Новая
       8

Как сделать внутреннюю ссылку на go на элемент идентификатора другого компонента - Angular

2 голосов
/ 19 февраля 2020

Постановка проблемы

Кажется, я не могу использовать внутреннюю ссылку в теге <a> на go на специфицированный c раздел другого компонента с помощью HTML ID.

Что я пробовал

Мой код

Это страница, на которую я ссылаюсь: 

<a href="../products/products.component.html#backToTopBtn"><button mat-raised-button class="productsServicesBtn">Products
      <br>Services</button></a>

Это страница, на которую я хочу перейти: 

<body>
  <button mat-raised-button id="backToTopBtn">Back to Top</button>
</body>

Пожалуйста Примечание : это два разных компонента Angular.

Объяснение кода

Как видите, я использую второй веб-сайт сказал мне сделать внутри href с идентификатором HTML в конце ссылки, чтобы сообщить браузеру, к какому разделу go перейти. Это не работает.

К вашему сведению , идентификатор в конце называется " идентификатор фрагмента ".

Ожидаемые результаты

Ссылка " internal " открывает другую страницу и переходит в указанный вами раздел c.

Фактические результаты

Ссылка ничего не делает и не go нигде.

Ответы [ 2 ]

2 голосов
/ 19 февраля 2020

Во-первых, вы должны настроить свои ссылки, используя директиву routerLink. 

<a routerLink="/products">
  <button mat-raised-button class="productsServicesBtn">
    Products<br>Services
  </button>
</a>

Это предполагает, что вы настроили свой маршрут. Вы должны прочитать о маршрутизации , если нет. 

  { path: 'products', component: ProductsComponent }

Во-вторых, вы указываете фрагмент через ввод fragment директивы routerLink: 

<a routerLink="/products" fragment="backToTopBtn">
  <button mat-raised-button class="productsServicesBtn">
    Products<br>Services
  </button>
</a>

Наконец, вам нужно включить прокрутку привязки при импорте модуля маршрутизатора, поскольку прокрутка к фрагменту по умолчанию отключена: 

imports: [
  RouterModule.forRoot([
    { path: 'products', component: ProductsComponent }
  ], { anchorScrolling: 'enabled' })
]

DEMO: https://stackblitz.com/edit/router-template-4uagmq

0 голосов
/ 19 февраля 2020

РЕДАКТИРОВАТЬ: я добавил фрагмент

Вы не должны ссылаться на ./products.component.html, поскольку он не существует во время выполнения (в браузере).

вы должны ссылаться на маршрут с помощью routerLink 

 <a routerLink="/product" fragment="backToTopBtn">services</a>

check angular документы Маршрутизация и навигация

...