将单页 HTML 转换为 Angular 11

如何解决将单页 HTML 转换为 Angular 11

我为网站创建了单页 HTML。我添加了部分标签来区分部分。部分在滚动时滚动，当单击顶部菜单中的任何链接时，它将在特定部分上滚动。下面是我的 HTML 代码。

    <div id="pagepiling" class="wrapper">
    <section id="home"
        class="navbar-is-white text-dark pp-scrollable d-flex align-items-center section position-absolute home-bg"
        role="main">
        <div class="intro">
            <div class="scroll-wrap">
                <div class="container">                       
                </div>
            </div>
        </div>
    </section>
    <section id="about" class="section pp-scrollable d-flex align-items-center position-absolute">
        <div class="intro">
            <div class="scroll-wrap">
                <div class="container">
                </div>
            </div>
        </div>
     </section>
    <section id="service" class="section pp-scrollable d-flex align-items-center position-absolute">
        <div class="intro">
            <div class="scroll-wrap">
                <div class="container">
                </div>
            </div>
        </div>
     </section>
    <section id="career" class="section pp-scrollable d-flex align-items-center position-absolute">
        <div class="intro">
            <div class="scroll-wrap">
                <div class="container">
                </div>
            </div>
        </div>
     </section>
    <section id="contact" class="section pp-scrollable d-flex align-items-center position-absolute">
        <div class="intro">
            <div class="scroll-wrap">
                <div class="container">
                </div>
            </div>
        </div>
     </section>
</div>

我创建了一个 Angular 11 应用程序，并且在该应用程序中启用了路由。现在，需要在此应用程序中迁移上述代码。因此，我创建了 Angular 11 应用程序并实现了我的 HTML 代码。但所有部分都是一对一的，而不是按照顺序排列。