javascript - 如何在 Angular2 中申请日期？

Question

这是我今天的函数:

public static todaysDate(month: number): string {
        let day = new Date().getDate();
        let year = new Date().getFullYear();
        return "<span>" + day + ", " + "</span>" + year;
    }

这是明天的约会:

public static tomorrowsDate(month: number): string {
            let day = new Date().getDate() + 1;
            let year = new Date().getFullYear();
            return "<span>" + day + ", " + "</span>" + year;
        }

在我的 HTML 中:

<ul class="text-left">
                <li><img src="../left.png"/></li>
                <li><span [innerHTML]="date"></span></li>
                <li><img src="../images/right.png"/></li>
            </ul>

我正在使用 [innerHTML]呈现 HTML <span></span>标签。

这是我的组件:

this.date = Date.todaysDate(this.month);
this.dateTomorrow = Date.tomorrowsDate(this.month);

如何在 right.png 和 left.png 图片点击上应用明天和昨天的日期？

Answer 1

您的函数返回一个日期并在插入的字符串中使用管道重新格式化为所需的日期格式似乎更好。

像这样的{{ date |日期}}

这里有一个例子:https://plnkr.co/edit/amip8h2pZMxeM7fi7yAZ?p=preview

因为我没有你的图片，所以我使用了按钮，但是代码应该基本相同。

  <ul class="text-left">
       <li><button (click)="todaysDate(3)">left</button></li>
       <li>{{date | date}}</li>
       <li><button (click)="tomorrowsDate(3)">right</button></li> 
  </ul>

以及组件功能:

export class App {
    name:string;
    date: date;
    constructor() {
       this.name = `Angular! v${VERSION.full}`
    }

  todaysDate(month: number): void {
    let day = new Date().getDate();
    let year = new Date().getFullYear();
    this.date = new Date(year, month, day);

  }

  tomorrowsDate(month: number): void {
        let day = new Date().getDate() + 1;
        let year = new Date().getFullYear();
        this.date = new Date(year, month, day);
  }
}