Angular2 Routing Auflösung zu Pfad: '' auf Master Detail

Question

Das Problem hier ist, dass nach dem Klicken auf View Jobs die Seite erfolgreich zu Master-Detail geht dann schnell zu Pfad: '', Komponente: JobsComponent. unten das ist, wo ich die Stelle anzeigen-Taste, um ein Detail Meister ausführen

Routing-Datei, die Master-Detail-Pfad

const appRouts: Routes = [ 

    { 
    path: '', 
    component: JobsComponent 
    }, 
    { 
    path: 'learner', 
    component: LeanershipsComponent 
    } { 
    path: 'cvTips', 
    component: CvTipsComponent 
    }, 
    { 
    path: 'detail/:id', 
    component: JobDetailComponent 
    } 
] 

<table *ngFor="let l of getKeys()" class="table"> 
    <tr class="odd hide-jobs"> 
    <td class="tbl-logo"><img src="assets/img/job-logo5.png" alt=""></td> 
    <td class="tbl-title"> 
     <h4> {{jobs[l].title}}<br><span class="job-type">full time</span></h4> 
    </td> 
    <td> 
     <p>{{jobs[l].company}} </p> 
    </td> 
    <td> 
     <p><i class="icon-location"></i>{{jobs[l].location}}</p> 
    </td> 
    <td> 
     <p>{{jobs[l].salary}}</p> 
    </td> 
    <td routerLink="./detail/{{l}}" class="tbl-apply"><a href="">View Job</a></td> 
    <td class="tbl-apply"><a href="">Apply now</a></td> 
    </tr> 
</table> 

Dieser Code erfolgreich zeigte zum Detail hat bekommt IDs von Firebase dann übergibt sie an Schleife *ngFor

import { 
    Component, 
    OnInit 
} from '@angular/core'; 
import { 
    Service 
} from '../../service/service' 

@Component({ 
    selector: 'app-jobs', 
    templateUrl: './jobs.component.html', 
    styleUrls: ['./jobs.component.css'], 
    providers: [Service] 
}) 
export class JobsComponent { 

    jobs 
    key = [] 
    constructor(private todoService: Service) { 

    let promise = todoService.getJobs(); 
    promise.then(snapshot => { 
     this.jobs = snapshot.val(); 
     var listJobs = snapshot.val(); 
     // console.log(listJobs); 
    }) 
    this.getKeys(); 

    } 
    ngAfterViewInit() { 
    this.getKeys(); 
    } 
    getKeys() { 
    try { 
     this.key = Object.keys(this.jobs); 
     //console.log(this.key); 
    } catch (e) { 
     // console.log(e);  
    } 
    return this.key; 
    } 

} 

Answer 1

Entfernen Sie href="" von Ihrem Anker-Tag. Es sollte dein Problem lösen.