Angular - nawigacja w obrębie jednego komponetu między akapitami.

Question

Witam, nie wiem jak stworzyć menu które nawigowało by w obębie jednej strony między np. akapitami. Czy istnieje w angular funkcja typu $anchorscroll, która działała w podobny sposób. Mi jeszcze nie udało się takiej znaleźć. Używam routingu do nawigacji po między stronami, ale nie wiem jak zastosować to w przypadku poruszania się w jednym komponencie. Będę wdzięczny za wszelkie infomracje. 
 

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h1>{{ restaurant.name }}</h1>
    </div>
    <div class="col-xs-8" id="menu-detail">
      <nav class="navbar navbar-default">
        <ul class="nav navbar-nav" id="menu">
          <li><a routerLink="#menur" id="about" >About</a></li>
          <li><a >Menu</a></li>
          <li><a href="#review">Reviews</a></li>
        </ul>
      </nav>
    </div>

    <div class="container">
    <div class="col-xs-8">
      <h2>{{ restaurant.description }}</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum urna mi, non luctus lectus suscipit vel. Proin aliquet iaculis auctor. Mauris venenatis massa eget velit porta molestie. Morbi nunc diam, convallis non ornare at, accumsan eu dui. Mauris eu velit tincidunt, sagittis purus in, congue nunc. Mauris consectetur eu neque et suscipit. Aenean arcu orci, iaculis et tempor vel, egestas ac lorem. Quisque et dolor quis felis aliquam suscipit quis vitae orci. Sed vestibulum nunc purus, id tincidunt odio laoreet convallis. Vivamus commodo venenatis est, vel pretium dolor semper at. Nulla ut aliquam tellus, a ornare dui. In ante libero, interdum vitae vehicula sed, rhoncus sit amet erat. Donec laoreet sed justo in hendrerit. Mauris vulputate eleifend quam. Sed cursus, justo eget consequat sagittis, sapien augue ultrices orci, quis imperdiet justo nulla malesuada quam.</p>

<p> dictum leo eu molestie dictum. Etiam at vulputate urna. Proin aliquet tincidunt arcu, imperdiet posuere felis aliquam eu. In ac ultrices risus, sit amet lacinia arcu. Nam vulputate nulla hendrerit justo tincidunt, a posuere felis semper. Curabitur vestibulum finibus eros nec consectetur. Vestibulum dapibus dolor in lorem hendrerit, et auctor ligula pulvinar. Integer ut metus vel lectus efficitur porttitor. Praesent condimentum arcu consectetur ante consequat volutpat. Praesent eget malesuada velit. Nullam eu metus sit amet tortor tempus tempus a at nibh. Curabitur laoreet consectetur sem, sed convallis magna pharetra a. Donec pellentesque turpis vitae facilisis volutpat. Nullam nisl mauris, interdum sit amet leo nec, lobortis dictum est. Donec eleifend, sem in fermentum dignissim, lectus est elementum ligula, sit amet tincidunt ligula odio sagittis mi.</p>

<p>Sed vitae turpis vitae eros hendrerit fringilla. Aliquam ut facilisis nisi, quis ultrices ipsum. Etiam non cursus risus. Ut non risus nunc. Nullam magna nibh, mattis a commodo quis, varius hendrerit nulla. Integer eu metus a est tempor ullamcorper. Duis suscipit metus dolor, et ornare nibh dictum vel.</p>
    </div>

    <div class="col-xs-8" id="menur">
      <h3>Menu Restauracji</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum urna mi, non luctus lectus suscipit vel. Proin aliquet iaculis auctor. Mauris venenatis massa eget velit porta molestie. Morbi nunc diam, convallis non ornare at, accumsan eu dui. Mauris eu velit tincidunt, sagittis purus in, congue nunc. Mauris consectetur eu neque et suscipit. Aenean arcu orci, iaculis et tempor vel, egestas ac lorem. Quisque et dolor quis felis aliquam suscipit quis vitae orci. Sed vestibulum nunc purus, id tincidunt odio laoreet convallis. Vivamus commodo venenatis est, vel pretium dolor semper at. Nulla ut aliquam tellus, a ornare dui. In ante libero, interdum vitae vehicula sed, rhoncus sit amet erat. Donec laoreet sed justo in hendrerit. Mauris vulputate eleifend quam. Sed cursus, justo eget consequat sagittis, sapien augue ultrices orci, quis imperdiet justo nulla malesuada quam.</p>

<p> dictum leo eu molestie dictum. Etiam at vulputate urna. Proin aliquet tincidunt arcu, imperdiet posuere felis aliquam eu. In ac ultrices risus, sit amet lacinia arcu. Nam vulputate nulla hendrerit justo tincidunt, a posuere felis semper. Curabitur vestibulum finibus eros nec consectetur. Vestibulum dapibus dolor in lorem hendrerit, et auctor ligula pulvinar. Integer ut metus vel lectus efficitur porttitor. Praesent condimentum arcu consectetur ante consequat volutpat. Praesent eget malesuada velit. Nullam eu metus sit amet tortor tempus tempus a at nibh. Curabitur laoreet consectetur sem, sed convallis magna pharetra a. Donec pellentesque turpis vitae facilisis volutpat. Nullam nisl mauris, interdum sit amet leo nec, lobortis dictum est. Donec eleifend, sem in fermentum dignissim, lectus est elementum ligula, sit amet tincidunt ligula odio sagittis mi.</p>

<p>Sed vitae turpis vitae eros hendrerit fringilla. Aliquam ut facilisis nisi, quis ultrices ipsum. Etiam non cursus risus. Ut non risus nunc. Nullam magna nibh, mattis a commodo quis, varius hendrerit nulla. Integer eu metus a est tempor ullamcorper. Duis suscipit metus dolor, et ornare nibh dictum vel.</p>
    </div>
    <div class="col-xs-8" id="review">
      <h4>Review</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum urna mi, non luctus lectus suscipit vel. Proin aliquet iaculis auctor. Mauris venenatis massa eget velit porta molestie. Morbi nunc diam, convallis non ornare at, accumsan eu dui. Mauris eu velit tincidunt, sagittis purus in, congue nunc. Mauris consectetur eu neque et suscipit. Aenean arcu orci, iaculis et tempor vel, egestas ac lorem. Quisque et dolor quis felis aliquam suscipit quis vitae orci. Sed vestibulum nunc purus, id tincidunt odio laoreet convallis. Vivamus commodo venenatis est, vel pretium dolor semper at. Nulla ut aliquam tellus, a ornare dui. In ante libero, interdum vitae vehicula sed, rhoncus sit amet erat. Donec laoreet sed justo in hendrerit. Mauris vulputate eleifend quam. Sed cursus, justo eget consequat sagittis, sapien augue ultrices orci, quis imperdiet justo nulla malesuada quam.</p>

<p> dictum leo eu molestie dictum. Etiam at vulputate urna. Proin aliquet tincidunt arcu, imperdiet posuere felis aliquam eu. In ac ultrices risus, sit amet lacinia arcu. Nam vulputate nulla hendrerit justo tincidunt, a posuere felis semper. Curabitur vestibulum finibus eros nec consectetur. Vestibulum dapibus dolor in lorem hendrerit, et auctor ligula pulvinar. Integer ut metus vel lectus efficitur porttitor. Praesent condimentum arcu consectetur ante consequat volutpat. Praesent eget malesuada velit. Nullam eu metus sit amet tortor tempus tempus a at nibh. Curabitur laoreet consectetur sem, sed convallis magna pharetra a. Donec pellentesque turpis vitae facilisis volutpat. Nullam nisl mauris, interdum sit amet leo nec, lobortis dictum est. Donec eleifend, sem in fermentum dignissim, lectus est elementum ligula, sit amet tincidunt ligula odio sagittis mi.</p>

<p>Sed vitae turpis vitae eros hendrerit fringilla. Aliquam ut facilisis nisi, quis ultrices ipsum. Etiam non cursus risus. Ut non risus nunc. Nullam magna nibh, mattis a commodo quis, varius hendrerit nulla. Integer eu metus a est tempor ullamcorper. Duis suscipit metus dolor, et ornare nibh dictum vel.</p>
    </div>
    </div>
  </div>
</div>

 

Comments

Wnioskując po użyciu dyrektywy ng-controller, korzystasz z AngularJS (1.x), a tam przecież jest funkcja $anchorScroll

---

Korzystam z najnowszego angulara , to pozostałości po próbie uruchomienia $anchorScroll. Próbowałem róznych sposóbów i może kod nie jest zbyt przejrzysty.

---

Korzystam z najnowszego angulara

To nie mieszaj kodu 1.x z 2+.

Tu masz bibliotekę od tego: https://github.com/Nolanus/ng2-page-scroll

Ale zanim ją wypróbujesz, to czy bawiłeś się Location i HashLocationStrategy? Na przykład metoda go() z przekazaniem jako parametru hasha lub aktualnego adresu (pobierzesz przez metodę path()) + hash z nazwą anchora.

---

Pierwsza biblioteka działa bez problemu. Drugą metodą mi się nie udało tego wykonać.