如何在Angular2中为无线电计划设置默认日期url参数

Question

我有一个路由设置到电台节目时间表,我传递给的参数ScheduleComponent是日期.但是,我在尝试为路径设置默认值时遇到问题.

在经历了很多失败之后,我决定总是在链接上设置日期.但现在我需要突出显示.active路线,因此需要弄清楚如何设置计划的默认值.

有人可以帮助我指出正确的方向.

目前的路线:

const routes = [
    {
        path: 'schedule/:date',
        component: ScheduleComponent,
    }
]

我正在考虑做这样的事情,但无法安排在给定日期前往正确的地方.我不确定这是正确的方法:

const routes = [
    {
        path: 'schedule',
        component: ScheduleComponent,
        redirectTo: 'schedule/yyyy-MM-dd', // Replacing yyyy-MM-dd with todays date.
        children: [
            { path: ':date', component: ScheduleComponent, pathMatch: 'full' }
        ]
    }
]

主导航构造器,这是我想要使用的地方/schedule:

  constructor(private datePipe: DatePipe, private colorService: ColorService) {
    this.navs = [
      {url: '/schedule/' + this.datePipe.transform(new Date(), "yyyy-MM-dd"), content: "Schedule"},
      // ... other routes
    ];

示例链接:

<a [routerLink]="['/schedule', day | date: 'yyyy-MM-dd']"
     routerLinkActive="active"
     class="schedule-nav-button">
     {{day | date:"EEE"}}
</a>

时间表组件:

import {Component, OnInit, Inject} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {Http} from "@angular/http";
import "rxjs/add/operator/map"
import "rxjs/add/operator/switchMap"
import {BehaviorSubject} from "rxjs/BehaviorSubject";
import {ColorService} from "../../services/color.service";

@Component({
    selector: 'app-schedule',
    templateUrl: '../views/schedule.component.html',
    styleUrls: ['../css/schedule.component.css']
})
export class ScheduleComponent implements OnInit {
    schedule$ = new BehaviorSubject([{
        "start_time": new Date(),
        "end_time": new Date(),
        "radio_show": {
            "id": 0,
            "name": "Loading...",
            "description": "",
            "small_thumb": "",
            "presenters": [
                {
                    id: 0,
                    name: "Loading.."
                }
            ]
        }
    },]);
    date: Date;

    constructor(@Inject('api') private api, private colorService: ColorService, private route: ActivatedRoute, private http: Http) {
        this.date = new Date();
        route.params
            .map((p: any) => p.date)
            .switchMap(date => http.get(api + '/schedules/' + date)
                .map(res => res.json())
            ).subscribe(this.schedule$);
    }

    ngOnInit() {
        this.colorService.change("blue");
    }

}

更新

这是我的解决方案.正如Thomas Schoutsens建议我将我的路线设置为指向相同的组件.

const routes = [
    { path: 'schedule/:date', component: ScheduleComponent },
    { path: 'schedule', component: ScheduleComponent }
]

然后我添加了一个或语句来添加默认日期(如果没有提供)(date || this.datePipe.transform(this.date, "yyyy-MM-dd")).

constructor(@Inject('api') private api, private datePipe: DatePipe, private colorService: ColorService, private route: ActivatedRoute, private http: Http) {
        this.date = new Date();
        route.params
            .map((p: any) => p.date)
            .switchMap(date => http.get(api + '/schedules/' + (date || this.datePipe.transform(this.date, "yyyy-MM-dd")))
                .map(res => res.json())
            ).subscribe(this.schedule$);
    }

Answer 1

不要使用带有今天日期的默认参数,而是将参数设置为可选,如果需要,可以在组件中设置默认日期.

要使参数可选,请使用相同的组件创建2个路径:

const routes = [
    { path: 'schedule/:date', component: ScheduleComponent },
    { path: 'schedule', component: ScheduleComponent }
]

然后在你的组件中:

route.params.subscribe(params => {
    this.date = params['date'];
    if(!date)
        this.date = new Date();
});