Для возврата назад предыдущего компонента после маршрутизации с выбранным объектом - PullRequest
Новая
       25

Для возврата назад предыдущего компонента после маршрутизации с выбранным объектом

1 голос
/ 05 июля 2019

У меня есть три компонента header, list & home

В header путь маршрутизации компонента для list компонента будет задан так: 

  <div>
    <a [routerLink]="['../list']" >List</a>
  </div>

Этот header компонент находится внутри обоих компонентов list и home.

В list компоненте я отображаю data на картах, подобных этой:

enter image description here

Теперь, когда пользователь нажимает на конкретную карту, пользователь перенаправляется на компонент home вместе с выбранным объектом id следующим образом:

enter image description here

код компонента

home.html 

<app-header></app-header>
<h2>List Component</h2>
<div *ngFor="let contact of contacts" >

 <mat-card [routerLink]="['../home' , contact.id]"  >
    <h4>{{contact.contactName}}</h4>
     <p>{{contact.email}}</p>
</mat-card>
</div>

app-routing.module.ts 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; 
import { ListComponent } from './list/list.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
    { path: '', component: ListComponent },
    { path: 'list', component: ListComponent },  
    { path: 'home/:id', component: HomeComponent },  
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

home.ts 

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public id: string;
   public sub: any = {};
  constructor(public route: ActivatedRoute) { }

  ngOnInit() {
     this.sub = this.route.params.subscribe(params => {
        this.id = params['id'];
        });
        console.log(this.id);
  }

}

home.html 

<app-header></app-header>
<h2>Home Component</h2>
Clicked ID ==> {{id}}

Теперь проблема заключается в следующем:

  • Когда я нажимаю home компоненты, URL-адрес будет https://XXXX-XXX-XX/home/02
  • Теперь из home компонента, если я нажимаю list (присутствует в компоненте заголовка), затем URL меняется https://XXXX-XXX-XX/home/list

Как можноя возвращаюсь к list компоненту из home компонента?

Stackblitz demo

1 Ответ

1 голос
/ 05 июля 2019

Добавив: 

{ path: 'list', component: ListComponent }

Таким образом, ваши маршруты будут выглядеть так: 

const routes: Routes = [
  { path: '', component: ListComponent }, -- for default page
  { path: 'list', component: ListComponent },  
  { path: 'home/:id', component: HomeComponent },  
];

и HTML-код: 

<div>
    <a [routerLink]="['/list']">List</a>
</div>

Проблема с текущим кодом:

Вы используете ../list, в котором .. означает один уровень пути вверх (поэтому, если вы на /home/home.component.html и вы ввели ../list.component.html, то это относится к папке home изатем найдите list.component.html файл)

Forked_StackBlitz

...