Угловой 5, два компонента на одной странице

Question

Я хочу посмотреть, есть ли еще какой-нибудь компонент, который будет отображаться на той же странице, что и я. У меня есть:

<button mat-button color="primary" [routerLink]="['/tripspath', trip.tripId]" style="cursor: pointer">View Route</button>

Который переходит к компоненту tripspath и работает нормально, пока tripspath получает tripId как:

var id = this.route.snapshot.params['id'];

Но проблема в том, что я не хочу, чтобы он переходил на другую страницу. Я хочу, чтобы он оставался на той же странице и просто отображал поле (маршрута) под текущим содержанием.

Answer 1

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

Answer 2

Не используйте ссылку на маршрутизатор.Внедрите компонент с атрибутом * ngIf, переключаемым вашей кнопкой, которая начинает скрываться.

Answer 3

Затем вы должны добавить элемент, который будет отображаться за кнопкой, и использовать *ngIf, чтобы показать или скрыть компонент

.

<button mat-button color="primary" (click)="showComponent()" style="cursor: pointer">View Route</button>
<trip-component *ngIf="trip.tripId==25"></trip-component>

в component.ts

showComponent(){
   trip.tripId=25;
}

<trip-component> может быть пользовательским компонентом или простым элементом div с кодом для показа внутри.

Answer 4

Полагаю, вы ищете способ отображения вложенных маршрутов.проверьте статью ниже, это поможет вам.

https://codecraft.tv/courses/angular/routing/nested-routes/