Angular4中页面刷新/切换后如何保留datetimepicker的日期值

先直接回答你的几个疑问：

• datetime picker是否会在页面切换时自动重置？
  组件本身不会主动重置，但如果page-1的TransactionComponent在路由切换时被销毁（比如离开page-1到page-2时组件被卸载），组件内的日期变量会被重新初始化，导致picker显示默认值或空值。
• 页面刷新后能否恢复原有日期？
  默认不行，页面刷新后整个应用重新初始化，所有组件内存里的变量都会回到初始状态，必须靠持久化存储来保留值。
• 代码中的日期变量是否也会被重置？
  是的，组件销毁或页面刷新后，date1、toDateTransaction这些变量都会被重新赋值（比如你设置的new Date()），原来选中的值会丢失。

接下来解决你的核心需求：如何在页面切换/刷新后让picker显示之前选中的数值，同时先修复你当前的模板报错。

第一步：修复模板解析错误 #

你遇到的Can't bind to 'options' since it isn't a known property错误，是因为这个组件根本没有options输入属性！另外你还同时给一个控件绑定了两个[(ngModel)]，这也是语法错误——一个表单控件只能绑定一个ngModel（和formControlName二选一）。

修正后的模板代码：

transaction.component.html #

<div class="form-group">
  <angular2-date-picker 
    title="Click to enter To Date and Time" 
    [(ngModel)]="toDateTransaction" 
    [settings]="settings1"
    <!-- 如果你的控件在FormGroup内，保留formControlName；否则删掉这一行 -->
    formControlName="toDateTransaction"
  ></angular2-date-picker>
</div>

第二步：用持久化存储保留日期值 #

只靠共享服务的内存变量是不够的（页面刷新或组件销毁后会丢失），我们需要把选中的日期存在localStorage（持久化，浏览器重启也保留）或sessionStorage（关闭浏览器就清除）里。

修改你的组件逻辑：

transaction.component.ts #

import { Component, OnInit } from '@angular/core';
import { ShareDataService } from './path-to-your-share-data.service'; // 替换成你的共享服务路径

export class TransactionComponent implements OnInit {
  toDateTransaction: string; // 和settings的format对应，用字符串格式更稳妥
  settings1 = {
    bigBanner: true,
    timePicker: true,
    format: 'yyyy-MM-dd hh:mm',
    defaultOpen: false
  };

  constructor(private shareData: ShareDataService) {}

  ngOnInit() {
    // 初始化时优先从localStorage读取保存的日期，没有的话用共享服务值或当前时间
    const savedDate = localStorage.getItem('toDateTransaction');
    if (savedDate) {
      this.toDateTransaction = savedDate;
    } else {
      // 用当前时间生成符合format的字符串
      const now = new Date();
      this.toDateTransaction = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
      this.shareData.toDateTransact = this.toDateTransaction;
    }
  }

  searchByDate(data_fromDate, data_toDate, filterDataForSearch) {
    // 把选中的日期同时存到共享服务和localStorage
    this.shareData.toDateTransact = this.toDateTransaction;
    localStorage.setItem('toDateTransaction', this.toDateTransaction);
    
    // 执行你的搜索和页面跳转逻辑
    // ...
  }
}

第三步：处理页面返回的场景 #

当你从page-2返回page-1时，如果TransactionComponent是重新创建的（普通路由切换），ngOnInit会自动执行，从localStorage读取保存的日期，picker就会显示之前选中的值。如果组件是被缓存的（比如用了路由复用策略），可以在组件激活时（比如ngAfterViewInit）重新读取localStorage的值同步到picker。

额外注意点 #

• 确保日期字符串的格式和settings里的format完全一致，否则picker无法正确解析显示。
• 如果使用FormGroup管理表单，初始化表单控件时也要从localStorage取值：

  this.transactionForm = this.fb.group({
    toDateTransaction: [localStorage.getItem('toDateTransaction') || this.toDateTransaction]
  });
  

内容的提问来源于stack exchange，提问作者user9630712