要素への角度ルーティング

Question

私は以下のソリューションのリンク（例：ソリューション/クリック）の1つをクリックすると、ページがその要素にスクロールするようにしようとしています。ここで

<li><a routerLink="/solutions" routerLinkActive="active" class="main-links separate highlight">{{'NAVIGATION_SOLUTIONS'|translate}}</a> 
        <ul class="nav-dropdown set-width items"> 
         <li><a routerLink="/solutions/click">{{'NAVIGATION_CLICK_COLLECT'|translate}}</a></li> 
         <li><a routerLink="/solutions/returns">{{'NAVIGATION_STORE_RETURNS'|translate}}</a></li> 
         <li><a routerLink="/solutions/aisle">{{'NAVIGATION_ENDLESS_AISLE'|translate}}</a></li> 
         <li><a routerLink="/solutions/store">{{'NAVIGATION_STORE_FULFILMENT'|translate}}</a></li> 
         <li><a routerLink="/solutions/customer">{{'NAVIGATION_CUSTOMER_CARE'|translate}}</a></li> 
         <li><a routerLink="/solutions/partner">{{'NAVIGATION_PARTNER_FULFILMENT'|translate}}</a></li> 
        </ul> 
       </li> 

は私のルートです：

const appRoutes: Routes = [ 
    { path: 'homepage', component: HomepageComponent}, 
    { path: 'homepage/:id', component: HomepageComponent}, 
    { path: 'solutions', component: SolutionsComponent}, 
    { path: 'solutions/:id', component: SolutionsComponent}, 
    { path: 'work', component: WorkComponent } 
]; 

そして、これは私が上で立ち往生しています一部です。私はid（例えば、クリック、リターンなど）を認識するようにしました。しかし、私はどのように要素にページのスクロールを持って行くことを把握することはできません。誰が私がここで何をすべきか知っていますか？

ngOnInit() {  
    this.route.params 
    .map(params => params['id']) 
    .subscribe((id) => { 
     this.scrollTo(id) 
     console.log(id); 
    }); 
    } 

    scrollTo(id: string) { 


    } 

Answer 1

（これはダムの質問であれば、私は最後の週のための角度使用して、非常に混乱して感じてきた申し訳ありませんが）私はあなたの望ましい結果を達成するために、サードパーティ製のモジュールを使用してお勧めします。チェックアウトはngx-page-scrollです。

スクロールするIDを取得したら、モジュールのPageScrollServiceを使用して、希望するアンカーにスクロールアニメーションを開始できます。 SolutionsComponentの各サブコンポーネントには、idsを指定する必要があります。これらは、リンクでクリックしたIDと一致する必要があります。スクロールを開始するには、PageScrollService's startメソッドを使用します。あなたは、このリンクでは、完全な詳細な例（輸入）をチェックアウトすることができますhttps://github.com/Nolanus/ngx-page-scroll#service

ここであなたが

//solutions.component.ts 
constructor(
    private pageScrollService: PageScrollService, @Inject(DOCUMENT) 
    private document: any) {} 

ngOnInit() {  
    this.route.params 
    .map(params => params['id']) 
    .subscribe((id) => { 
     this.scrollTo(id) 
     console.log(id); 
    }); 
    } 

scrollTo(id: string) { 
    let pageScrollInstance: PageScrollInstance = PageScrollInstance.simpleInstance(this.document, '#' + id); 
    this.pageScrollService.start(pageScrollInstance); 
    } 


//solutions.component.html 
<div id="aisle"> 
    ... 
</div> 
<div id="returns"> 
    ... 
</div> 
... 

を行うために必要なもののアイデアを与えるためのサンプルコードがあります