0

I'm a beginner in Angular. My goal is to create a file system with only directory for begin. First time when I call the component, it loads the data from my backend. The second time that I navigate to subdirectories, I do a console.log() to output the id that I take from the route and it's the correct one.

Retrieving the params:

 this.router.params.subscribe(
      (params: Params) => {
        this.parentEntryId = +params['id'];
        console.log('directory ' + params.id);
      }
    );

Why can't I reach to:

console.log("foo")

All my code:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Entry } from 'app/models/entry/entry.model';
import { EntryService } from 'app/service/entry.service';
import { AuthenticationService } from '../../service/authentication.service';
import {  ActivatedRoute, Params } from '@angular/router';

declare interface TableData {
  headerRow: string[];
  entries: Entry[];
}

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


  tableData1: TableData;
  currentUserId: number;
  parentEntryId : number;

  constructor(
    // private route: Router,
    private router: ActivatedRoute,
    private entryService: EntryService,
    private authenticationService: AuthenticationService
  ) { }

  ngOnInit() {
    this.currentUserId = this.authenticationService.getLoggedUserId();

    this.tableData1 = {
      headerRow: ['ID', 'TYPE', 'EXECUTABLE', 'NAME', 'OWNER', 'OPERETION'],
      entries: []
    };

    this.router.params.subscribe(
      (params: Params) => {
        this.parentEntryId = +params['id'];
        console.log('directory ' + params.id);
      }
    );

    console.log("foo");
    console.log('parentId' + this.parentEntryId);
    this.entryService.listWithId(this.parentEntryId).subscribe(

      (data: Entry[]) => {
        console.log('enter here ');
        this.tableData1.entries = data;
      }
    );
  }
}
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Fotis Tasou
  • 5
  • 2
  • 7
  • What are you basically trying to achieve? Is it that the component does not reload with different params or you can't get to console.log(too)? Can you share the routes definitions since different params loading is possible. Use `path:'pathurl/:id'` in route defs and give different ids while routing – Gary Sep 09 '18 at 23:37
  • The component reload with different param i log it console.log('directory ' + params.id); and its different every time. { path: 'entry/:id', component: DirectoryComponent} in my router. [routerLink]="['/entry', entry.id] in html.it looks like its stuck in the subscription. It cant log to ("foo"). – Fotis Tasou Sep 09 '18 at 23:57
  • My goal is navigation deeper inside a file system evrey time pasing a id of parent dir an retrieving his child – Fotis Tasou Sep 10 '18 at 00:00
  • if you see here this.entryService.listWithId(this.parentEntryId).subscribe( (data: Entry[]) => { console.log('enter here '); this.tableData1.entries = data; } ); .I need the parentEntryId to call my back end but this functions is never called. – Fotis Tasou Sep 10 '18 at 00:38
  • I change my code and it work. I made a subscribe inside the subscribe. this.router.params.subscribe( (params: Params) => { this.parentEntryId = +params['id']; console.log('directory ' + params.id); this.entryService.listWithId(this.parentEntryId).subscribe( (data: Entry[]) => { console.log('enter here '); this.tableData1.entries = data; } ); } ); .Can you tell me what the problem was – Fotis Tasou Sep 10 '18 at 01:35
  • It would be the best if you create stackblitz. My blind guess is that router uses the same component that is initialized only once. – Antoniossss Sep 10 '18 at 06:35
  • @Antoniossss I'm thinking the same.How can i check this and how to solve it. – Fotis Tasou Sep 10 '18 at 16:42
  • I am unsure what the real issue could be. Can you put a stackblitz? I somehow think onSameUrlNavigation api with reload option might work. But seems like you can't subscribe to it and the event is not triggered. – Gary Sep 12 '18 at 07:52
  • On a jiffy try this else put a demo code in stackblitz for some debugging https://stackoverflow.com/questions/40983055/how-to-reload-the-current-route-with-the-angular-2-router/40983262 – Gary Sep 12 '18 at 07:53

0 Answers0