基于浏览器位置/设置的 Angular 2 Datepipe 格式答案

【问题标题】：Angular 2 Datepipe formatting based on browser location/settings基于浏览器位置/设置的 Angular 2 Datepipe 格式
【发布时间】：2018-01-15 14:58:12
【问题描述】：

有没有办法让日期管道动态化，这样如果它是美国浏览器，日期管道返回美国格式 (yyyy/MM/dd)，而当它是欧洲浏览器时，它返回欧洲格式 (dd/MM/yyyy) ?

谢谢

【问题讨论】：

标签： angular date format date-pipe

【解决方案1】：

我知道这可能看起来很讨厌，但它比乞求 Angular 为你做这件事要简单得多：

public renderLocaleDateTime(date: Date, dateStyle = 'medium', timeStyle = 'medium'): string {
    var script = 'const date = new Date("' + date + '"); const options = { dateStyle: "' + dateStyle + '", timeStyle: "' + timeStyle + '" }; date.toLocaleString({}, options);';
    return eval(script);
}

然后：

<span title="{{ renderLocaleDateTime(date, 'long', 'long') }}">
    {{ renderLocaleDateTime(date) }}
</span>

或者更好，让它成为一个管道。

【讨论】：

【解决方案2】：

我认为你应该使用原生 JS API Date.prototype.toLocaleDateString() 来实现这个目标。看到这个link。

您可以实现自己的 Angular 管道来使用此 API。

【讨论】：

【解决方案3】：

你可以检查位置并将其放入if语句中是的，您可以像这样使用管道：

     <div *ngif="Location() === 'Europe' "
     {{valueDate | date: 'dd/MM/yyyy'}}
     <div>
     <div *ngif="Location() === 'Ammerica' "
     {{valueDate | date: 'MM/dd/yyyy'}}
     <div>

寻找位置

getCurrentLocation(lat,lng): Observable<any> {
return this._http.get("http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&sensor=true")
  .map(response => response.json())
  .catch(error => {
    console.log(error);
    return Observable.throw(error.json());
  });

}

【讨论】：

您能解释一下我如何检查位置吗？我不需要用户的许可吗？
我编辑了上面的代码，看代码，希望有用
感谢您的回答，我认为这也确实有效。但我确实认为 Robin Dijkhof 的答案要好一些，因为它会在浏览器设置中查找语言。不过这也可以，所以谢谢！

【解决方案4】：

这可能很难，尤其是在使用 aot 时。它通常需要您进行不同的构建。我扩展了数据管道并使用了浏览器区域设置。

日期管道：

@Pipe({name: 'datepipe', pure: true})
export class MyDatePipe extends DatePipe implements PipeTransform {
  constructor(private win: WindowRef) {
    super(win.ln);
  }

  transform(value: any, pattern?: string): string | null {
    return super.transform(value, pattern);
  }
}

窗口：

function _window(): any {
  // return the global native browser window object
  return window;
}

@Injectable()
export class WindowRef {
  get nativeWindow(): any {
    return _window();
  }

  public ln = 'en';


  constructor() {
    try {
      if (!isNullOrUndefined(this.nativeWindow.navigator.language) && this.nativeWindow.navigator.language !== '') {
        this.ln = this.nativeWindow.navigator.language;
      }
    }finally {}
  }
}

【讨论】：

对不起，我的无知，但你到底是什么意思的窗口？那只是一个window.ts文件吗？我如何在我的 Angular 项目中实现这一点？
这是一个简单的服务
isNullOrUndefined 是什么？我的编辑不认识它。
import {isNullOrUndefined} from 'util';