Angle4.0 라우팅에서 매개변수를 얻는 가장 좋은 방법

이번에는 Angle4.0routing에서 매개변수를 전달하고 얻을 수 있는 최적의 솔루션을 소개해드릴 예정이며, Angle4.0 라우팅에서 매개변수를 전달하고 얻을 때 주의해야 할 주의사항은 다음과 같습니다. 실제 사례를 살펴보겠습니다.

ng4 공식 홈페이지에서 공부한 끝에 드디어 제가 원하는 방법을 찾았습니다. 제가 원하는 결과는 '&' 접합 매개변수를 사용하여 보내는 것인데, 이것이 읽기에 가장 좋습니다.

그렇지 않으면 '/' 스플라이스가 많아 매개변수와 구성 요소 이름을 쉽게 혼동할 수 있습니다.

일반적으로 페이지 점프 전송 매개변수의 형식은 다음과 같습니다.

http://angular.io/api?uid=1&username=moon

하지만 SPA 단일 페이지 애플리케이션에서는 대부분의 결과가 다음과 같습니다. [초등 동영상 은 모두 너무 형식적입니다.]

http://angular.io/api/1/moon

그렇다면 내가 언급한 결과를 어떻게 얻을 수 있나요?

집중이 시작됩니다.

제품 페이지에서 제품 세부 정보 페이지로 이동하는 것을 실현하세요.

1단계: app-routing.module.ts에서 라우팅을 구성합니다.

const routes: Routes = [
{
 path: 'product',
 component: ProductComponent,
 },
 {
 path: 'product-detail',
 component: ProductDetailComponent,
 }
];

2단계: product.ts에 점프를 작성하고 매개변수를 전달합니다.

constructor(
 private router: Router, //这里需要注入Router模块
){}
jumpHandle(){
 //这是在html中绑定的click跳转事件
 this.router.navigate(['product-detail'], {
 queryParams: {
  productId: '1',
  title: 'moon'
 }
 });
}

3단계: product-detail.ts

constructor( 
 private activatedRoute: ActivatedRoute, //这里需要注入ActivatedRoute模块 
) { 
 activatedRoute.queryParams.subscribe(queryParams => { 
 let productId = queryParams.productId; 
 let title = queryParams.title; 
 }); 
}

에서 전달된 매개변수 productId 및 title을 가져옵니다. 네, 그게 완벽한 해결책이에요.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

IView에서 on-change 속성을 사용하는 방법

vue 프로젝트에서 sass 구성을 사용하는 방법

위 내용은 Angle4.0 라우팅에서 매개변수를 얻는 가장 좋은 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!