Как щелкнуть выбранный элемент и затем перейти к соответствующему компоненту в раскрывающемся списке p?

См. p-dropdown. Я изменил класс City, у которого теперь есть еще одно свойство url . Это свойство указывает путь к компоненту.

Я создал раскрывающийся список как

interface City {
    name: string;
    code: string;
    url:  string;
}

export class DropdownDemo {

cities: City[];

selectedCity: City;

constructor() {
    this.cities = [
        {name: 'New York', code: 'NY', url: 'app/ny'},
        {name: 'Rome', code: 'RM', url: 'app/rm'},
        {name: 'Washington DC', code: 'DC', url: 'app/dc'},
        {name: 'Houston', code: 'HT', url: 'app/ht'},
        {name: 'Paris', code: 'PR', url: 'app/pr'}
        ];
   }
}

Выпадающее меню находится на панели навигации. Страница html:

  <div class="collapse navbar-collapse>
    <ui class="narbar-nav mr-auto">
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/ny">NY</a>
        </li>
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/rm">RM</a>
        </li>
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/dc">DC</a>
        </li>
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/ht">HT</a>
        </li>
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/pr">
                 <p-dropdown [options]="cities" [(ngModel)]="selectedCity" 
           optionLabel="name"></p-dropdown>
           </a>
         </li>
      </ui>
     </div>

Выпадающий список отображается правильно. Теперь я хочу, чтобы если я щелкнул элемент раскрывающегося меню, он перешел к соответствующему компоненту. Так что, наверное, мне придется куда-нибудь привязать href или routerLink. Но я просто не знаю как?

ОБНОВЛЕНИЕ:

Если я добавляю событие щелчка внутри элемента p-dropdown при навигации, код кажется работающим, но страница все еще находится в компоненте пути api/pr.


angular primeng primeng-dropdowns
person Hello    schedule 03.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

вы можете использовать onChange ($ event),

  <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" (onChange)="onChange($event)"></p-dropdown>

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

router.navigate(['xxxxx']);

чтобы перейти на нужную страницу, но для начала нужно настроить роутер!

Изменить:

вам нужно изменить это:

<a class="nav-link" href="#" routerLink="/api/pr">
  <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-dropdown>
</a>

to

<p-dropdown [options]="cities" [(ngModel)]="selectedCity" 
           optionLabel="name" (onChange)="onChange($event)"></p-dropdown>

то в вашем ts-файле вам нужно создать новый метод, подобный этому:

onChange(event) {
    console.log('event :' + event);
    console.log(event.value);
    router.navigate([event.value.url]); // something like that

}
person Numero3bis    schedule 03.02.2021
comment
Обновил вопрос. Дело в том, что маршрутизатор может работать, но он все еще находится в компоненте навигационного элемента. - person Hello; 03.02.2021
comment
<a class="nav-link" href="#" routerLink="/api/pr"><a> Всегда будет приводить вас к / api / pr. OnChange ($ event) позволит вам узнать, какой город нажат, и сделать разные вещи, например, перенаправить ваше приложение на другую страницу. Я думаю, вам нужно реализовать некоторую логику в своем файле ts - person Numero3bis; 03.02.2021
comment
Да думаю, что это может быть проблема. Похоже, что <a class="nav-link" href="#" routerLink="/api/pr"><a> переопределяет onChange($event). Но не знаю, как с этим бороться. - person Hello; 03.02.2021
comment
Отредактировал свой ответ! (Извините, я новичок в стеке :) - person Numero3bis; 03.02.2021
comment
Работает, спасибо. Не думал, что нужно убирать элемент a. - person Hello; 03.02.2021
comment
Хороший ! чтобы сделать ссылку, вам не нужно постоянно ‹a› ‹/a›, если вы хотите что-то сделать с компонентом, вы можете использовать метод, а в своем методе маршрутизировать пользователя! - person Numero3bis; 04.02.2021