滚动到从不同组件角度4

Question

在我的角度4项目中，我有一个菜单部分。此菜单部分包含菜单和子菜单，我的另一个组件是此菜单的详细信息部分。

我想在单击菜单部分的菜单时，详细信息菜单部分将平滑滚动到所需部分，而不会影响URL（不附加哈希标记）。

以下是这两个组件的屏幕截图（1. menucomponent，2。detailcomponent）

menucomponent screenshot：

我提供菜单部分代码： Detailcomponent截图： -

<div class="rsnt-cat-menu">
        <ul>
            <li><a href="javascript:void(0)">Popular</a></li>
            <li class="active-cat" *ngFor="let menu of menuArray">

                <a href="javascript:void(0)" (click)="gotoTop();">{{ menu.cat_name }}</a>
                <ul>
                    <li *ngFor="let submenumenu of menu.sub_category_list">
                        <a href="">{{ submenumenu.cat_name }}</a>
                    </li>

                </ul>
            </li>
        </ul>
    </div>

详细信息部分代码

<div *ngFor="let singleElement of foodArray" class="rsnt-menu-block">
        <h2 class="main-subheading">{{ singleElement.cat_name }}</h2>
        <div *ngFor="let subchildElement of singleElement.sub_category_list">
            <div>
                <h3 
                    class="main-subheading-type2">
                    {{ subchildElement.cat_name }} {{ subchildElement.sub_category_item.length }} Items
                </h3>
                <div>
                    <ul *ngFor="let sibling of subchildElement.sub_category_item" class="menu-row-list">

                        <li *ngIf="sibling.filterStatus">
                            <div class="row">
                                <div class="col-9">
                                    <h5><span [ngClass]="{'ft-nonveg' : sibling.item_veg== '0' , 'ft-veg' : sibling.item_veg== '1' }" class="food-type"></span> 
                                    {{ sibling.item_name }}</h5>
                                    <span class="item-main-price">{{ sibling.sales_price }}</span>
                                    <span class="sub-head-type1">{{ sibling.item_desc }}</span>
                                </div>
                                <div class="col-3">
                                    <div class="cart-action">
                                        <button class="add-cart" type="button">ADD</button>
                                        <div class="cart-i-q">
                                            <input readonly="" value="1" type="text">
                                            <button disabled="" type="button" class="add-i-b valdown">-</button>
                                            <button type="button" class="add-i-b valup">+</button>
                                        </div>
                                        <span *ngIf="sibling.choice" class="customised-txt">Customisable</span>
                                    </div>
                                </div>
                            </div>                                            
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div *ngIf="singleElement.sub_category_list.length==0">
            <span>{{ singleElement.category_item.length }} Items</span>
            <ul *ngFor="let catchildElement of singleElement.category_item" class="menu-row-list">
                    <li *ngIf="catchildElement.filterStatus">
                        <div class="row">
                            <div class="col-9">
                                <h5><span [ngClass]="{'ft-nonveg' : catchildElement.item_veg== '0' , 'ft-veg' : catchildElement.item_veg== '1' }" class="food-type"></span> 
                                {{ catchildElement.item_name }}</h5>
                                <span class="item-main-price">{{ catchildElement.sales_price }}</span>
                                <span class="sub-head-type1">{{ catchildElement.item_desc }}</span>
                            </div>
                            <div class="col-3">
                                <div class="cart-action">
                                    <button class="add-cart" type="button">ADD</button>
                                    <div class="cart-i-q">
                                        <input readonly="" value="1" type="text">
                                        <button disabled="" type="button" class="add-i-b valdown">-</button>
                                        <button type="button" class="add-i-b valup">+</button>
                                    </div>
                                    <span *ngIf="catchildElement.choice" class="customised-txt">Customisable</span>
                                </div>
                            </div>
                        </div>                                            
                    </li>
            </ul>
        </div>
    </div>

Answer 1

看看您是否可以使用此模块进行滚动而不更改路径https://github.com/nicky-lenaers/ngx-scroll-to，过去对我有用。