@Input with router.navigate angular4

Here is a way how you can pass params using navigate to the component loading by the route.

The way Angular 4 creates URL and routes is something like this:

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

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

  constructor(private router: Router) { }

  ngOnInit() {
  }

  onLoadServers(id: number){
    this.router.navigate(['/servers', id, 'edit'],{queryParams: {allowEdit: '1'}, fragment: 'loading'});
  }

} 

Due to the command navigate in onLoadServers() you will receive the following view of the route:

http://localhost:4200/servers/1/edit?allowEdit=1#loading

In the component loading by this route you can receive the query params and the fragment(loading - in this case) with:

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  console.log(this.route.snapshot.queryParams);//{allowEdit:"1"}
  console.log(this.route.snapshot.fragment);//loading
}