dslak_website/src/app/detail/detail.component.ts

import { Component, OnInit } from '@angular/core'
import { Router, NavigationEnd, NavigationStart, ActivatedRoute } from '@angular/router'
import { Location } from '@angular/common'
import { ApisService } from '../services/apis.service'

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit {

  public details: any = {}
  private history: string[] = []

  constructor(
    private apisService: ApisService,
    private router: Router,
    private location: Location,
    private activeRoute: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.showDetails(this.router.url.split('/')[2], this.router.url.split('/')[3])
  }

  showDetails(section, id): void {
    this.apisService.getDetails(section, id).toPromise().then((response) => {
      if(this.history[this.history.length - 1] != `/detail/${section}/${id}`) {
        this.history.push(`/detail/${section}/${id}`)
      }
      this.details = response.item
    },(error) => {
      console.error('getPortfolio ERROR', error)
    }).catch((e) => {
      console.error('getPortfolio CATCH', e)
    })
  }

  back(): void {
    this.history.pop()
    if(this.history.length > 0) {
      const last = this.history[this.history.length - 1]
      this.showDetails(last.split('/')[2], last.split('/')[3])
      this.location.back()
    } else {
      this.location.back()
    }
  }
}