带有打字稿的角度材料设计

Posted 2023-03-13

【中文标题】带有打字稿的角度材料设计

【英文标题】：angular material design with typescript

【发布时间】：2017-01-12 04:45:42

【问题描述】：

我是打字稿的新手，打字。模糊理解类型定义并尝试使用打字稿和角度材料设计设置角度 1.5 项目。

我在类型>全局>角材料中有角材料类型定义。 我不知道我可以导入什么模块以及在哪里检查。如果我像下面的例子一样，我得到一个例外：模块'材料'不可用！

import * as angular from 'angular';
import * as material from 'angular-material';

angular.module('app.services', []);
angular.module('app', ['app.services', 'material']);

types>globals>angular-material 中 index.d.ts 的顶部是

declare module 'angular-material' 
    var _: string;
    export = _;


declare namespace angular.material  ...

提前致谢。

【参考方案1】：

应该是这样的，

angular.module('app.services', []);
angular.module('app', ['app.services', 'ngMaterial']);

【讨论】：

导入语句应该是什么？从“角度材料”导入 ngMaterial；

应该是 import ngMaterial from 'angular-material';

它给出错误：模块 ''angular-material'' 没有默认导出。

【参考方案2】：

你不应该从 'angular-material' 导入 只需添加对类型的引用：

/// <reference path="../typings/angular-material/angular-material.d.ts" />

（请务必先安装 angular-materials 的类型）

然后使用：

angular.module('app.services', []);
angular.module('app', ['app.services', 'ngMaterial']);

【参考方案3】：

例如，在定义材料提供者时，您应该删除单引号

import * angular from 'angular';
import * as material from 'angular-material';

angular.module('app.services', []);
angular.module('app', ['app.services', material]);

这将解决您的问题。

对于导入材料样式表，您可以使用以下代码。

import 'angular-material/angular-material.css';

对于没有类型定义的库，您可以使用以下代码。

import * as angular from 'angular';
require('../../../node_modules/angular-messages');

angular.module('app.services', []);
angular.module('app', ['app.services', 'ngMessages']);

注意：这里你应该使用字符串来定义提供者

【参考方案4】：

小，希望有用，补充（我最近遇到的经验）。如果您需要在 TS 单元测试中使用 angular-material，您也需要将其导入到规范文件中（而在主代码中，您只需导入一次并在主模块中设置为依赖项）。然后在顶部 import 'angular-material'; 就足够了，并为必要的服务添加相应类型的变量，例如let dialog:ng.material.IDialogService;