Обработка двух разных процедур по двум вызовам

У меня есть два компонента. в первом есть дважды один и тот же вызов страницы (select-person/{{person.id}})

component1.html :

            <td><a routerLink="select-person/{{person.id}}" class="person_link">{{person.nom}}</a></td> 
            <td>{{person.adress}}</td>
            <td>{{person.tel}}</td>

            <td>
              <a routerLink="select-person/{{person.id}}"><button class="xxx" title="Modifier"></button></a>

            </td>
          </tr>

Во втором компоненте на странице есть несколько элементов, включая кнопку.

component2.html:

  <button class="classicButton" (click)="valid()">OK</button>

Я хотел бы, чтобы, когда я нажимаю на одну из двух «маршрутизаторных ссылок», кнопка «ОК» второго компонента для одного активировалась, а для другого деактивировалась.

поведение кнопки второго компонента должно отличаться в зависимости от нажатой ссылки маршрутизатора

как я мог сделать?


angular angular8
person Nitneuq    schedule 11.10.2019    source источник
comment
Используйте два разных маршрута или одни и те же маршруты, но с другим параметром или параметром запроса.   -  person JB Nizet    schedule 12.10.2019

Ответы (1)


arrow_upward
1
arrow_downward

Самое простое, как говорит JbNizet, определить несколько маршрутизаторов для одного и того же компонента.

const appRoutes: Routes = [
  { path: 'one', component: OneComponent,data:{component:'one'} },
  { path: 'onebis', component: OneComponent,data:{component:'one-bis'} },
];

В вашем компоненте можно спросить о данных в ngOnInit

  ngOnInit()
  {
    this.dataRouter=this.activatedRoute.snapshot.data
  }

Еще один подход из Angular 7.2 - использовать «состояние», поэтому ссылки могут быть такими:

<a routerLinkActive="active" routerLink="/one" 
     [state]="{ data: 'data 0' }">
     One - data 0
</a>

или вы перемещаетесь как

this.router.navigateByUrl('/one', { state: { data: 'data 0' } });

Затем из компонента вы как о данных, например

ngOnInit()
  {
    this.activatedRoute.paramMap
      .pipe(map(() => window.history.state),
      take(1))
      .subscribe(res=>{
        this.data=res
      })
  }

Но в этом случае нужно учитывать, что для получения данных нужно изменить навигацию. в стекеблиц, если нажать на One data-0, а после One data-1, так как это один и тот же компонент вы не получите данных. См. stackblitz.

ПРИМЕЧАНИЕ: window.history.date дает вам дополнительное свойство navigationId

ПРИМЕЧАНИЕ 2: я использую take(1) для автоматической отмены подписки.

Обновить вопрос не в этом, но если мы хотим контролировать отправку данных в состоянии из main.component, подписываемся на this.router.events

  //In "main.component" (the component that has the <router-outlet>)
  ngOnInit()
  {
    this.router.events.pipe(
      filter(e => e instanceof NavigationStart),
      map(() => this.router.getCurrentNavigation().extras.state)
    ).subscribe(res=>{
      this.data=res
    })
  }
person Eliseo    schedule 12.10.2019