Angular2 + ng2-材质导入 [英] Angular2 + ng2-material import

问题描述

我使用 angular 2 和 ng2-material 来显示单选和复选框组件，在每个组件中我看到我必须导入所有 ng2-material 内容，最后只使用一个组件

I'm using angular 2 with ng2-material to display radio and checkbox components, in each component I see that I have to import all the ng2-material contents and finally using only one component

=> 结果，它对我的​​应用收费并使其速度变慢.

=> the result, it charges my app and makes it slower.

我想知道我是否可以只导入我需要的组件，尽管在 ng2-material 文档中他们导入了所有组件???

I want to know if I may import only the component that I need, despite that in the ng2-material documentation they are importing all of them ???

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from "ng2-material/all"; <<<<<

import {ROUTER_DIRECTIVES} from 'angular2/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common';

@Component({
    selector: 'radiobox',
    templateUrl: '/radiobox.html',
    styleUrls: ['radiobox.css'],
    directives: [MATERIAL_DIRECTIVES] <<<<<<

推荐答案

根据all.ts文件，你可以通过自己的模块导入每个组件.这个文件只是export * from并创建一些常量.

According to the all.ts file, you can import each component by its own module. This file simply does export * from and creates some constants.

以下是此文件的一些内容:

import {MdAnchor, MdButton} from "./components/button/button";
import {MdCheckbox} from "./components/checkbox/checkbox";
import {MdContent} from "./components/content/content";
import {MdDataTable, MdDataTableHeaderSelectableRow, MdDataTableSelectableRow} from './components/data_table/data_table';
import {MdDialog} from "./components/dialog/dialog";
import {MdDivider} from "./components/divider/divider";
import {MdIcon} from "./components/icon/icon";
import {MdInk} from "./components/ink/ink";
import {
  MdPatternValidator,
  MdMaxLengthValidator,
  MdMinValueValidator,
  MdMaxValueValidator,
  MdNumberRequiredValidator,
  INPUT_VALIDATORS
} from "./components/form/validators";
import {MdMessage, MdMessages} from "./components/form/messages";
import {MdInput, MdInputContainer} from "./components/input/input";
import {MdList, MdListItem} from "./components/list/list";
import {MdProgressLinear} from "./components/progress_linear/progress_linear";
import {MdProgressCircular} from "./components/progress_circular/progress_circular";
import {MdPeekaboo} from "./components/peekaboo/peekaboo";
import {MdRadioButton, MdRadioGroup} from "./components/radio/radio_button";
import {MdRadioDispatcher} from "./components/radio/radio_dispatcher";
import {MdSwitch} from "./components/switcher/switch";
import {MdSubheader} from "./components/subheader/subheader";
import {MdSidenav, MdSidenavContainer} from "./components/sidenav/sidenav";
import {SidenavService} from "./components/sidenav/sidenav_service";
import {MdToolbar} from "./components/toolbar/toolbar";
import {MdTabs, MdTab} from "./components/tabs/tabs";
import {Media} from "./core/util/media";
export * from './components/button/button';

例如，如果您只想使用单选按钮:

For example if your only want to use radio buttons:

import {
  MdRadioButton, MdRadioGroup
} from "ng2-material/components/radio/radio_button";

常量见同一个文件:https://github.com/justindujardin/ng2-material/blob/master/ng2-material/all.ts#L85.

这篇关于Angular2 + ng2-材质导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！