Angular 基于浏览器位置/设置的角度2日期管格式

是否有一种方法可以使datepipe动态化，以便如果它是美国浏览器，datepipe返回美国格式（yyyy/MM/dd），如果它是欧洲浏览器，它返回欧洲格式（dd/MM/yyyy）

---

谢谢

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

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

{
console.log（错误）；
返回Observable.throw（error.json（））；
});

---

}

这可能很困难，尤其是在使用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 {}
  }
}

---

我认为应该使用原生JSAPI

Date.prototype.toLocaleDateString（）

来实现这个目标。看这个

---

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

我知道这可能看起来很糟糕，但这比乞求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>

{{renderLocaleDateTime（日期）}

---

或者更好，把它做成一个管道。

你能解释一下我如何检查位置吗？我编辑了上面的代码，看到了代码，我希望它是有用的。谢谢你的回答，我认为这也会起作用。但是我确实认为Robin Dijkhof的答案要好一点，因为它在浏览器设置中查找语言。尽管如此，这也会起作用，所以谢谢！对不起，我的无知，但你对window到底是什么意思？那只是一个window.ts文件吗？如何在我的Angular项目中实现这一点？它是一个简单的服务什么是

isNullOrUndefined

？我的编辑器无法识别它。

从'util'导入{isNullOrUndefined}
<span title="{{ renderLocaleDateTime(date, 'long', 'long') }}">
    {{ renderLocaleDateTime(date) }}
</span>