angular4.0のルーティングでパラメータを渡し、パラメータを取得する最も良い方法についての簡単な説明

以下のエディターは、Angular 4.0 のルーティングでパラメーターを渡し、パラメーターを取得するための最も優れた方法に関する記事を共有します。これは優れた参考値であり、皆さんのお役に立てれば幸いです。エディターをフォローして見てみましょう

ng4 の公式 Web サイトを調べた後、ついに希望の方法を見つけました。私が望む結果は、送信に「&」スプライシング パラメータを使用することです。これは読み取りに最適です。

そうしないと、「/」スプライスが多数存在し、パラメーターとコンポーネント名が混同されやすくなります。

通常、ページジャンプ転送パラメータは次の形式です:

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

step2: product.ts にジャンプを記述し、パラメータを渡します。

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

ステップ3: product-detail.tsで渡されたパラメータproductIdとtitleを取得します

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

、これは完璧な解決策です。

上記は私があなたのためにまとめたものです。

関連記事:

vueでのcssプリロードをベースにしたsassを使った設定方法を詳しく解説

WeChatアプレットに指ズーム画像を実装するサンプルコード

vue.jsをベースに実装したPaging

以上がangular4.0のルーティングでパラメータを渡し、パラメータを取得する最も良い方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。