Параметр маршрутизатора в Angular2

Проблема в том, что параметры маршрутизатора отображаются в URL-адресе, а я хочу, чтобы параметр маршрутизатора не отображался в URL-адресе?

myComponent.ts

@RouteConfig([      
        { path: '/routerOne/:myId', component: routerOne, name: "routerOne",useAsDefault: true},
        { path: '/routerTwo/:myId', component: routerTwo, name: "routerTwo"},

])

myComponent.html

  <a [routerLink]="['routerOne',{myId:this.Id}]">RouterOne</a>
  <a [routerLink]="['routerTwo',{myId:this.Id}]">routerTwo</a>

angular angular2-routing
person Mubashir    schedule 17.03.2016    source источник
comment
лучший способ сделать это с помощью sharedService на данный момент, я думаю!   -  person micronyks    schedule 17.03.2016
comment
не могли бы вы объяснить, как поступить с общими устройствами, как вы сказали, если вы приведете пример, это будет намного лучше для нас.   -  person Pardeep Jain    schedule 17.03.2016

Ответы (2)


arrow_upward
1
arrow_downward

На данный момент sharedService может быть последним вариантом, так как вы не хотите показывать данные в url. RouteData может быть вариантом, но это immutable. внимательно прочитайте эти две темы.

https://github.com/angular/angular/issues/6672

https://github.com/angular/angular/issues/6569

person micronyks    schedule 17.03.2016

arrow_upward
0
arrow_downward

Если вы хотите отправить статическое значение через маршрутизацию в качестве параметров, вы можете отправить через свойство data маршрутизации в angular2, используя эти параметры, которые не отображаются в URL-адресе.

В основном есть два варианта (насколько мне известно) для отправки данных через маршрутизацию

  • RouteParams          (используется в вопросе)
  • data(RouteData)     (свойство во время маршрутизации)

Параметры маршрута

Теперь, когда мы отправляем данные с помощью RouteParams, мы должны определить более похожим образом:

{path: '/editUser/:userId', name: 'Edit User', component: UserEditComponent}

<a href="#" [routerLink]="['Edit User',{userId: id}]"

Используя этот метод, мы отправляем данные в обычном режиме, но все данные видны в URL-адресе.

Данные

когда мы не хотим показывать данные в пути URL, мы должны отправлять данные через маршрутизацию, используя свойство data @RouteConfig annotation, предоставленное angualr2. с помощью этого свойства мы можем отправлять дополнительные данные компонентам во время настройки маршрута, не показывая их в URL-адресе. вот пример этого свойства.

@RouteConfig([
    {path: '/product/:id', component: ProductDetailComponentParam,
     as: 'ProductDetail', data: {isProd: true}}])

export class ProductDetailComponentParam {
    productID: string;
    constructor(params: RouteParams, data: RouteData) {
        this.productID = params.get('id');
 
        console.log('Is this prod environment', data.get('isProd'));
    }
}

с помощью этого мы можем отправлять данные через маршрутизацию без отображения в URL-адресе.

Plunker - рабочий пример того же

для получения дополнительной информации прочитайте этот отличный арт

person Pardeep Jain    schedule 17.03.2016