2017-04-21 3 views
0

ここで問題となるのは、View Jobsをクリックすると、ページがマスターディテールに到達した後、すぐにpath: ''、component:JobsComponentに移動することです。 enter image description here enter image description here enter image description here ダウン私は、マスター・ディテール・パスは、このコードが正常に取得細部にAngular2ルーティングがパスに解決しました: '' on Master Detail

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> 

を指摘しているビュー仕事ボタン

マスター細部へのルーティングファイルを実行していることがあります以下firebaseのIDをループに渡す *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; 
    } 

} 

答えて

0

アンカータグからhref=""を削除してください。あなたの問題を解決するはずです。

+0

ありがとうございます。不注意な間違い –

関連する問題