node.js - 如何在 Angular 2 应用程序中包含时刻时区

Question

我意识到，这个问题是重复的，但以前的一次没有提供恰当的答案时刻包已经安装

1.安装包

npm install moment-timezone --save

在node_modules目录中
|
|--时刻
|--时刻-时区

存在的目录

2. Index.html包含脚本

<script src="node_modules/moment-timezone/moment-timezone.js"></script>

System.config.js

  var map = {
    'moment':             'node_modules/moment',
    'momentzone':         'node_modules/moment-timezone'
  };
  var packages = {
    'moment':             { defaultExtension: 'js' },
    'momentzone':         { defaultExtension: 'js' }
  };

3.内部component.ts文件

import * as moment from 'moment/moment';

export class TimeComponent implements OnInit{
   ngOninit(){
         console.log(moment("2014-06-01T12:00:00Z").tz('America/Los_Angeles').format('ha z'));

   }
}

应该导入什么来防止错误 属性 tz 在“时刻”类型上不存在

score 26 · Accepted Answer

这可能会有所帮助。

为 angular-cli 或 npm install 运行以下命令。

sudo npm install moment moment-timezone --save
npm install @types/moment @types/moment-timezone --save-dev

对于 npm systemjs.config.js

   map: {
        'moment': 'npm:moment',
        'moment-timezone': 'npm:moment-timezone/builds'
      }
packages: { 
      'moment': {
          main: './moment.js',
          defaultExtension: 'js'
       },
      'moment-timezone': {
        main: './moment-timezone-with-data-2010-2020.min.js',
        defaultExtension: 'js'
      }
}

您想在 .ts 文件中的哪个位置使用时区

import * as moment from 'moment-timezone';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})

export class AppComponent {    
  name = 'Angular';
  jun = moment();// creating obj.
  constructor() {
    this.jun.tz('America/Los_Angeles').format('hh : mm : ss a z');
    console.log(this.jun.tz('America/Los_Angeles').format('hh : mm : ss a z'));
    console.log(moment.tz.names()); // for all time zone.
  }

score 25 · Accepted Answer

为 Angular 4 更新

moment-timezone在命令行上安装：

npm i -S moment-timezone

moment-timezone在您的组件中导入：

import * as moment from 'moment-timezone';

根据文档使用它：

this.time = moment().tz('America/New_York').format('HH:mm:ss z')

美国东部时间 16:20:42

文档

时刻文档

时刻时区文档

注意：moment故意没有安装或导入，因为它是moment-timezone.

score 7 · Accepted Answer

要在 2018 年为 Angular安装时刻时区：

安装 moment.js 和 moment-timezone

npm install moment moment-timezone @types/moment-timezone --save
在 .ts 文件中导入这些模块

import * as moment from 'moment'; import 'moment-timezone';

Github 问题：如何解决“tz”构建错误。

score 0 · Accepted Answer

我遇到了同样的问题，做了acdcjunior建议的所有事情，但还必须为moment-node安装类型：

typings install dt~moment-node --save --global

这样做之后，它就像一个魅力。

score 0 · Accepted Answer

该错误表示 Typescript 编译器在的类型定义（类型）上找不到.tz(...)方法。moment

你所要做的就是 installmoment-timezone的类型，所以它添加tz到moment().

（您通常会为要使用的每个库安装类型。问题是，一些类型定义文件（例如 angular 和 moment）将它们的类型定义文件嵌入到库的源代码中，从而使您无需安装它们的类型。 )

所以，如前所述，只需 installmoment-timezone的类型：

# if you have typings version 1.X.X
typings install moment-timezone --save --global

# if you have typings version 0.X.X
typings install moment-timezone --save --ambient

一切都应该工作......如果你多做一件事：

将您的配置重命名momentzone为moment-timezone（并添加.js文件）：

var map = {
    'moment':                  'node_modules/moment/moment.js',
    'moment-timezone':         'node_modules/moment-timezone/moment-timezone.js'
};
var packages = {
    'moment':                  { defaultExtension: 'js' },
    'moment-timezone':         { defaultExtension: 'js' }
};

这是必需的，因为您在此处使用的名称就是您将在import. 您在中使用import的名称是打字稿编译器用于查找类型定义的名称。您安装的类型定义了一个名为的模块moment-timezone，而不是momentzone.

之后，使用：

import * as moment from 'moment';
import 'moment-timezone'; // since this module only has side-effects, this is enough

这应该就是全部了。

PS.：在上面的设置中，您的编译器将从' 的源和' 的类型（函数）中选择moment' 的类型从绝对类型存储库（typings.json）。momentmoment-timezonetz

不过，有时他们玩得并不好。如果这种情况发生在您身上，您将不得不使用来自DefinitelyTyped 存储库(typings.json) 的类型来覆盖moment源中的类型。moment

换句话说：

# Only do this if installing moment-timezone alone didn't work...

# if you have typings version 1.X.X
typings install moment moment-timezone --save --global

# if you have typings version 0.X.X
typings install moment moment-timezone --save --ambient

score 0 · Accepted Answer

这就是我用的

moment(currentTime).tz(timeZone);

这是一个有效的 Stackblitz https://stackblitz.com/edit/angular-moment-timezone-23

node.js - 如何在 Angular 2 应用程序中包含时刻时区

6 回答 6

为 Angular 4 更新

文档

Related

Reference