如何在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);
  }
}

Answer 2

您需要为每个按钮绑定click 事件。在您的点击事件中，更新您的 date 变量。所以你的html会像

<ul class="text-left">
    <li><img ng-click="yesterdayDate()" src="../left.png"/></li>
    <li><span>{{date}}</span></li>
    <li><img ng-click="tomorrowDate()"src="../images/right.png"/></li>
</ul>