如何为 Angular2 中的广播时间表设置默认日期 url 参数

Question

我有一个广播节目时间表的路线设置，我传递给 ScheduleComponent 的参数是日期。但是，我在尝试为路线设置默认值时遇到问题。

在多次失败之后，我决定总是在 link 上设置日期。但现在我需要突出显示 .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
    ];

示例Link：

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

然后我添加了一个 or 语句来添加默认日期，如果 none 提供 (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();
});

如何为 Angular2 中的广播时间表设置默认日期 url 参数

How can I set default date url parameter for a radio schedule in Angular2

angular2-routing

angular