Angular2路由解析为主路径上的路径:''

时间:2017-04-21 12:16:47

标签: angular firebase angular2-routing

这里的问题是,点击查看作业后,页面成功转到主要细节,然后快速转到路径:'',component:JobsComponent。 enter image description here enter image description here enter image description here 低于我执行查看作业按钮到主要细节

的位置

具有指向详细信息的主细节路径的路由文件

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;
  }

}

1 个答案:

答案 0 :(得分:0)

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