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

您需要为每个按钮绑定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>

Answer 2

对于函数来说，返回日期并在插值字符串中使用管道重新格式化为所需的日期格式似乎更好。

像这样{{date | date}}

这是一个带有示例的plunker：https://plnkr.co/edit/amip8h2pZMxeM7fi7yAZ?p=preview

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

.2

组件功能：

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

如何在Angular2中应用日期？

2 个答案: