如何在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 |日期}}

下面是一個例子的plunker：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>