web-dev-qa-db-ja.com

[routerLink]でルートパラメータを渡す方法angular 2

angular 2、でアプリケーションを作成しようとしています、そして[routerLink]でタグを付けるためにparamsを渡したい、私はこのようなリンクを作りたい：

<a href="/auth/signup?cell=1654654654"></a>

テンプレートでcellを渡す方法がわかりません...

angularangular-routingangular-routerlink
10
Alireza Valizade

angula2 betaを使用する場合は、ルーティング中にこのようなパラメーターを送信する必要があります。

<a [routerLink]="['signup',{cell:cellValue}]">Routing with parameter</a>                        
<input type='text' [(ngModel)]='cellValue'>

受信側では、RouteParamsを使用してパラメーターを取得する必要があります。

angular2 RCでRouteSegmentを使用する代わりに、RouteParamsを使用する必要がある場合よりもangular2 RCを使用する場合は、ナットを使用してください。このような ：-

import { Component } from '@angular/core';

import { Routes, RouteSegment, ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: 'about-item',
  template: `<h3>About Item Id: {{id}}</h3>`,
  Directives: [ROUTER_DIRECTIVES]
})

class AboutItemComponent { 

  id: any;

  constructor(routeSegment: RouteSegment) {
    this.id = routeSegment.getParam('id');    
  }
}

@Component({

    selector: 'app-about',

    template: `

      <h2>About</h2>
        <a [routerLink]="['/about/item', 1]">Item 1</a>
        <a [routerLink]="['/about/item', 2]">Item 2</a>
      <div class="inner-outlet">
        <router-outlet></router-outlet>
      </div>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@Routes([

  { path: '/item/:id', component: AboutItemComponent }

])

export class AboutComponent { }
8
Pardeep Jain

queryParamsを使用すると、routerLinkでbuildurlを処理できます。例：

<a [routerLink]="['/profiles']" 
[queryParams]="{min:45,max:50,location:29293}">
  Search
</a>

これはbuildhttp://localhost:3000/profiles?min=45&max=50&location=29923のようなルートになります

幸運を。

11
Akash

以下のコードを試すことができます：tsファイルは次のようになります：

@Component({ ... })
@Routes([
    {
        path: '/auth/signup?cell=1654654654', component: AuthComponent
    }
])
export class AppComponent  implements OnInit {
    constructor(private router: Router) {}
}

そして、あなたのhtmlファイルでは、

<a [routerLink]="['//auth/signup?cell=1654654654']"></a>
2
Tarang Bhalodia

Angular2では、ルーティング内のクエリパラメーターとパス変数の両方をサポートしています。

次のように使用します：

<a [routerLink]="['Signup', {cell: '1654654654'}]">Signup</a>

そしてコンポーネント内：

@RouteConfig([
    new Route({ path: '/auth/signup', component: SignupComponent, name: 'Signup'})
])

次に、あなたが望むようなURLで表示されます/auth/signup?cell=1654654654

注意：

パスにコンポーネントのセルが含まれている場合は、次のようなパラメータとして/auth/signup/:cellおよびroutelink like：[routerLink]="['Signup', {cell: '1654654654'}]"の場合、URLは次のように表示されます：auth/signup/1654654654

2
Shaishab Roy

受け入れられた答えは時代遅れであり、私見は質問に答えません。

ただし、質問は明確ではありません。「route params」はURLのpath部分にありますが、質問は「query params」の後にあります。 「？」 （疑問符）。

したがって、質問への答えは @ Akashの回答 にあります。使用する必要があります

[queryParams]="{name: value}"

テンプレートで。

したがって、このアンカーは/path/with/myparam?cell=1654654654を参照します。

<a [routerLink]="['/path/with/:paramName', {paramName: "myparam"}]"
   [queryParams]="{cell: 1654654654}"
></a>
1
Manuel Fodor