Angular 4 - Routenwert nicht verfügbar

Question

Ich habe einen Dienst, der eine Liste von Routen zu Websites erhält, die verwendet wird, um ein Bootstrap 4 Dropdown-Menü mit dem folgenden Code zu erstellen.

Die Herausforderung, die ich habe, ist, ich kann nicht herausfinden, wie man den Routenwert erfasst und es in die Links für "Heim" und "Details" einfügt. Jede Hilfe würde sehr geschätzt werden!

import { Component, Injectable, OnInit, Pipe, PipeTransform } from '@angular/core'; 
 
import { Http, URLSearchParams } from '@angular/http'; 
 
import { Router, ActivatedRoute, Params } from '@angular/router'; 
 
import { Observable } from 'rxjs/Observable'; 
 
import { sitesService } from '../services/sites.service'; 
 

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

 
    sites: any; 
 
    filteredsiteTitle = ''; 
 
    selectedsite: { name: string }; 
 
    // selectedsite: any; 
 
    constructor(private sitesService: sitesService, private router: Router, private route: ActivatedRoute) { } 
 

 
    ngOnInit() { 
 
    // All sites 
 
    this.sitesService.getsites().subscribe(
 
     (response) => this.updatesites(response), 
 
     (error) => console.log(error) 
 
    ); 
 
    // Selected site 
 
    this.selectedsite = { 
 
     name: this.route.snapshot.params['name'] 
 
    }; 
 
    this.route.params.subscribe(
 
     (params: Params) => { 
 
      this.selectedsite.name = params['name']; 
 
      console.log(params); 
 
      return this.selectedsite.name; 
 
     } 
 
    ); 
 
    } 
 

 
    updatesites(sitesResponse) { 
 
    this.sites = sitesResponse; 
 
    this.sites = JSON.parse(this.sites._body); 
 
    } 
 

 
} 
 

 
HTML Template code is:

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <a class="navbar-brand" href="index.html"> 
 
     <span class="navbar-brand-heavy">DEMO</span><span class="navbar-brand-light">sites</span> {{selectedSite.name}} 
 
    </a> 
 
    <div class="collapse navbar-collapse" id="navbarCollapse" *ngIf="sites"> 
 
     <ul class="navbar-nav mr-auto"> 
 
     <li class="nav-item dropdown"> 
 
      <a class="nav-link dropdown-toggle selectedSite" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{selectedSite.name}}</a> 
 
      <div class="dropdown-menu" aria-labelledby="sites dropdown" id="sitesdropdown"> 
 
      <a class="dropdown-item"> 
 
       <input type="text" class="form-control" [(ngModel)]="filteredSites"> 
 
      </a> 
 
      <a *ngFor="let site of sites" 
 
       class="dropdown-item" 
 
       [routerLink]="['/home', site.Title]" 
 
       > 
 
       {{ site.Title }} 
 
      </a> 
 
      </div> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" routerLinkActive="active" [routerLink]="['/home', 'selectedSite']">Home</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" routerLinkActive="active" [routerLink]="['/details', selectedSite.name]">Details</a> 
 
     </li> 
 
     </ul> 
 
     <form class="form-inline mt-2 mt-md-0"> 
 
     <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
     </form> 
 
    </div> 
 
    </nav>

Answer 1

versuchen this.route.snapshot.paramMap.get('name')