Angle4.0에서 매개변수 라우팅 및 획득을 위한 매개변수를 작성하는 가장 좋은 방법에 대한 간략한 설명입니다.

아래 편집자는 Angular 4.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을 가져옵니다. 이것은 완벽한 솔루션입니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 글:

vue에서 CSS 프리로딩을 기반으로 sass를 사용한 구성 방법에 대한 자세한 설명

WeChat 애플릿에서 핑거 줌 이미지를 구현하기 위한 샘플 코드

vue.js를 기반으로 구현된 페이징

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