Angular2 路由解析为路径：'' 在 Master Detail 上

Question

这里的问题是，在单击“查看职位”后，页面会成功转到主要详细信息，然后快速转到路径：'',component:JobsComponent。下面是我执行 View Job 按钮到 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;
  }

}

Answer 1

从您的锚标记中删除 href=""。它应该可以解决您的问题。

Angular2 路由解析为路径：'' 在 Master Detail 上

Angular2 Routing resolve to path:'' on Master Detail

firebase

angular2-routing

angular