Передача параметров между родительской страницей дочернему компоненту - PullRequest
Новая
       14

Передача параметров между родительской страницей дочернему компоненту

0 голосов
/ 07 мая 2020

У меня проблемы с механизмом маршрутизации в Angular 9. У меня есть компонент Buildings и BuildingDetailComponent. Я не могу подобрать параметр внутри BuildingDetailCompoent. Его там нет, даже если он отображается в URL-адресе в адресной строке.

Итак, в родительском компоненте у меня есть только это ... маршрутизация у меня есть. 

 const routes: Routes = [ { path: '', component: BuildingDetailComponent, data: { title: 'Buildings},
  children: [ 
    { path: 'building-detail', component: BuildingDetailComponent, data: { title: 'Building Detail' } },
    { path: 'building-detail/:id', component: BuildingDetailComponent, data: { title: 'Building Detail' } }       
  ]
}
];

Итак, в основном я передаю значение вот так в моем BuildingComponent. html ... 

<td style="text-align: center;"><button [routerLink]="['./building-detail', building.ID]" class="button button-primary"><span >Edit</span></button></td>

Затем в BuildingDetailComponent I go чтобы собрать значение, используя следующее ... 

this.buildingID = (this.route.snapshot.paramMap.get('id') != null) ? parseInt(this.route.snapshot.paramMap.get('id')) : 0;

Я много пробовал с маршрутизацией, и, наконец, это единственная часть, которая мне сейчас нужна. build.ID не определен, поэтому, когда я смотрю на это .route нет параметров, хотя переданное значение можно увидеть в адресной строке.

Я могу добраться до него, выполнив следующие действия и, вероятно, что-то с ним сделав, но это кажется неправильным. 

let URL = this.router.url;

Я надеялся, что в качестве последнего пути кто-нибудь сможет дать мне совет по этому поводу.

Спасибо.

1 Ответ

2 голосов
/ 07 мая 2020

Проблема в том, что Angular будет go к первому совпадающему маршруту, который равен path: '', поэтому вы не могли увидеть :id там.

Мы могли бы улучшить дочернюю маршрутизацию, внеся некоторые изменения, так что Angular будет go на пути :id в дочернем маршруте 

const routes: Routes = [ 
  { 
    path: 'building-detail',   
    children: [ 
      { path: '', component: BuildingDetailComponent, data: { title: 'Building Detail' } },
      { path: ':id', component: BuildingDetailComponent, data: { title: 'Building Detail' } }       
    ] 
  }
];

Надеюсь, это поможет

...