각도가있는 페이지의 요소로 연결

Question

각도 라우팅을 사용하여 웹 사이트의 라우팅을 설정했습니다. 내 탐색 링크에는 모든 링크가 제대로 설정되어있어 예를 들어 "솔루션"링크를 클릭하면 웹 사이트/솔루션 페이지로 연결됩니다. 그러나 해당 솔루션 링크에는 솔루션 웹 페이지의 다른 섹션이있는 드롭 다운이 있습니다. 그 드롭 다운 메뉴에서 링크를 클릭하면 솔루션 페이지의 해당 섹션으로 이동하도록 설정하려고합니다. 여기

<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:id">{{'NAVIGATION_CLICK_COLLECT'|translate}}</a></li> 
         <li><a routerLink="/solutions:id">{{'NAVIGATION_STORE_RETURNS'|translate}}</a></li> 
         <li><a routerLink="/solutions:id">{{'NAVIGATION_ENDLESS_AISLE'|translate}}</a></li> 
         <li><a routerLink="/solutions:id">{{'NAVIGATION_STORE_FULFILMENT'|translate}}</a></li> 
         <li><a routerLink="/solutions:id">{{'NAVIGATION_CUSTOMER_CARE'|translate}}</a></li> 
         <li><a routerLink="/solutions:id">{{'NAVIGATION_PARTNER_FULFILMENT'|translate}}</a></li> 
        </ul> 
       </li> 

그리고 내 타이프 라이터입니다 : 정말 솔루션 페이지의 섹션을 탐색 할 수 있도록하려면

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; 
import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 
import { HttpClientModule, HttpClient } from '@angular/common/http'; 

import { AppComponent } from './app.component'; 
import { HomepageComponent } from './homepage/homepage.component'; 
import { SolutionsComponent } from './solutions/solutions.component'; 
import { WorkComponent } from './work/work.component'; 

import { RouterModule, Routes } from '@angular/router'; 
import { Directive } from '@angular/core'; 

export function HttpLoaderFactory(http: HttpClient) { 
    return new TranslateHttpLoader(http); 
} 

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 } 
]; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomepageComponent, 
    SolutionsComponent, 
    WorkComponent 
    ], 
    imports: [ 
    RouterModule.forRoot(
     appRoutes, 
     { enableTracing: true } 
    ), 
    BrowserModule, 
    HttpClientModule, 
    TranslateModule.forRoot({ 
     loader: { 
     provide: TranslateLoader, 
     useFactory: HttpLoaderFactory, 
     deps: [HttpClient] 
     } 
    }), 
    ], 
    providers: [ 
    HttpClient, 

    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

이 여기 내 HTML입니다. 솔루션 페이지의 다른 섹션에 대해 별도의 구성 요소를 만들지 않아도되므로 복잡한 작업이 필요하지 않습니다.

나는 이것을 보려고 노력했지만 모든 것이 매우 복잡해 보입니다. 아무도 내가 이것을 어떻게 할 수 있는지 안다?

Answer 1

그런 다음 구성 요소에이 같은 경로에서 ID/섹션을 얻을 수 있습니다

<a [routerLink]="['/solutions/' + SECTION_VAR]">Link name</a> 

에 태그를 변경

: 그래서 내가 그랬어

constructor(private route: ActivatedRoute) { 

} 

ngOnInit(){ 
    var section = this.route.snapshot.params['id'] 
}