Угловой компонент перезагрузки маршрутизатора Navbar 6 - PullRequest
Новая
       18

Угловой компонент перезагрузки маршрутизатора Navbar 6

0 голосов
/ 17 сентября 2018

Я использую angular 6 и ссылку на роутер в выпадающем меню на моей панели навигации. Проблема, с которой я сталкиваюсь, состоит в том, что routerlink не перезагружает веб-сайт и поэтому не маршрут. При нажатии кнопки в раскрывающемся списке она изначально загружается правильно, но когда пользователь нажимает другую кнопку в раскрывающемся списке (находясь еще на другой дочерней странице раскрывающегося списка), он не перезагружает содержимое на странице, а изменяет URL-адрес. При использовании Href все загружается правильно. 

<div 
  ngbDropdownMenu 
  class="dropdown-menu" 
  aria-labelledby="navbarDropdown">
  <div *ngFor="let competentie of competenties">
    <a 
      class="dropdown-item" 
      routerlink="/competenties/{{competentie.id}}">
      {{competentie.name}}
    </a>
  </div>
</div>

Это вынуждает меня использовать href вместо routerlink, чтобы перезагрузить страницу, чтобы компонент перезагрузил и отобразил содержимое с правым {{qualtie.id}}.

Есть ли способ перейти на другую раскрывающуюся страницу с помощью routerlink и обновить содержимое на странице?

Редактировать

Деталь компонента: 

export class CompetentieComponent implements OnInit {
competentie: Competentie;

constructor(private route: ActivatedRoute,
            private competentieService: CompetentieService,
            private location: Location
) {
}

getCompetentie(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.competentieService.getCompetentie(id)
        .subscribe(competentie => this.competentie = competentie);
}

ngOnInit() {
    this.getCompetentie();
}
}

Мой маршрут: 

const routes: Routes = [
{path: 'competenties/:id', component: CompetentieComponent}
];

Служба, получает данные из класса с массивом COMPETENTIES []: 

export class CompetentieService {

getCompetenties(): Observable<Competentie[]> {
    return of(COMPETENTIES);
}

getCompetentie(id: number): Observable<Competentie> {
    return of(COMPETENTIES.find(competentie => competentie.id === id));
}

constructor() {}
}

Ответы [ 3 ]

0 голосов
/ 17 сентября 2018

Попробуйте следующее для динамических маршрутов: 

<a class="dropdown-item"  [routerLink]="['/competenties/' + competentie.id]">
  {{competentie.name}}
</a>
0 голосов
/ 17 сентября 2018

добавьте это к своему коду: 

<a class="dropdown-item"  [routerLink]="['/competenties/' + competentie.id]">
  {{competentie.name}}
</a>
0 голосов
/ 17 сентября 2018

Вы используете this.route.snapshot.paramMap.get('id'), который сработает только один раз.Вы должны использовать params вместо snapshot.paramMap.get('id').params - это подписка BehaviorSubject, которая будет обновлять id каждый раз, когда она изменяется.

Вы должны внедрить ActivatedRoute в качестве зависимости в той же самой и затем подписаться на свойство paramsна нем. 

export class CompetentieComponent implements OnInit {
  competentie: Competentie;

  constructor(private route: ActivatedRoute,
    private competentieService: CompetentieService,
    private location: Location
  ) {}

  getCompetentie(): void {
    this.activatedRoute.params.subscribe(params => {
      let latestID = +params['id'];
      this.competentieService.getCompetentie(latestID)
        .subscribe(competentie => this.competentie = competentie);
    });
  }

  ngOnInit() {
    this.getCompetentie();
  }

}
...