परियोजना में कोणीय सामग्री कैसे आयात करें?

Question

मैंने कोणीय सामग्री डिजाइन स्थापित किया है। अब मैं इसे app.module.ts फ़ाइल में जोड़ने का प्रयास करता हूं:

import { MaterialModule} from '@angular/material ';

मुझे अनुभाग में क्या करना चाहिए: imports: []? कि सभी भौतिक संस्थाओं को लोड करने के लिए।

मैंने कोशिश की: imports: ['MaterialModule'] लेकिन यह

Answer 1

सामग्री मॉड्यूल संस्करण 2.0.0-बीटा 3 में कमी आई थी और इसे संस्करण 2.0.0-beta.11 में पूरी तरह से हटा दिया गया है। अधिक जानकारी के लिए यह CHANGELOG देखें।कृपया ब्रेकिंग बदलावों के माध्यम से जाओ।

ब्रेकिंग बदलता है

• कोणीय सामग्री अब यह आवश्यक है कोणीय 4.4.3 या अधिक से अधिक
• MaterialModule हटा दिया गया है।
• beta.11 के लिए, हम करने का निर्णय का बहिष्कार "md" उपसर्ग पूरी तरह से और उपयोग "चटाई" आगे बढ़ने कर दिया है।

कृपया CHANGELOG पर जाएं और हमें और जवाब मिलेगा!

उदाहरण नीचे दिखाया गया cmd

npm install --save @angular/material @angular/animations @angular/cdk 
npm install --save angular/material2-builds angular/cdk-builds 

'ऐप्लिकेशन' फ़ोल्डर के अंदर फाइल (material.module.ts) बनाएं app.module.ts पर

import { NgModule } from '@angular/core'; 

import { 
    MatButtonModule, 
    MatMenuModule, 
    MatToolbarModule, 
    MatIconModule, 
    MatCardModule 
} from '@angular/material'; 

@NgModule({ 
    imports: [ 
    MatButtonModule, 
    MatMenuModule, 
    MatToolbarModule, 
    MatIconModule, 
    MatCardModule 
    ], 
    exports: [ 
    MatButtonModule, 
    MatMenuModule, 
    MatToolbarModule, 
    MatIconModule, 
    MatCardModule 
    ] 
}) 
export class MaterialModule {} 

आयात

import { MaterialModule } from './material.module'; 

आपकी घटक HTML फ़ाइल

<div> 
    <mat-toolbar color="primary"> 
    <span><mat-icon>mood</mat-icon></span> 

    <span>Yay, Material in Angular 2!</span> 

    <button mat-icon-button [mat-menu-trigger-for]="menu"> 
     <mat-icon>more_vert</mat-icon> 
    </button> 
    </mat-toolbar> 
    <mat-menu x-position="before" #menu="matMenu"> 
    <button mat-menu-item>Option 1</button> 
    <button mat-menu-item>Option 2</button> 
    </mat-menu> 

    <mat-card> 
    <button mat-button>All</button> 
    <button mat-raised-button>Of</button> 
    <button mat-raised-button color="primary">The</button> 
    <button mat-raised-button color="accent">Buttons</button> 
    </mat-card> 

    <span class="done"> 
    <button mat-fab> 
     <mat-icon>check circle</mat-icon> 
    </button> 
    </span> 
</div> 

वैश्विक सीएसएस 'style.css'

@import '~https://fonts.googleapis.com/icon?family=Material+Icons'; 
@import '~@angular/material/prebuilt-themes/indigo-pink.css'; 

आपका घटक सीएसएस

body { 
    margin: 0; 
    font-family: Roboto, sans-serif; 
} 

mat-card { 
    max-width: 80%; 
    margin: 2em auto; 
    text-align: center; 
} 

mat-toolbar-row { 
    justify-content: space-between; 
} 

.done { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    color: white; 
} 

जोड़े किसी भी एक अनुदेश

नीचे उत्पादन उपयोग के बजाय ऊपर नहीं मिला तो इंटरफ़ेस (material.module.ts) आप सीधे app.module.ts में कोड के नीचे भी उपयोग कर सकते हैं।

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule, MatAutocompleteModule, MatInputModule,MatFormFieldModule } from '@angular/material'; 

तो इस मामले यू नहीं app.module.ts में

import { MaterialModule } from './material.module'; 

आयात करना चाहते हैं

Answer 2

बहिष्कृत है MaterialModule लक्ष्य है कि डेवलपर्स केवल अपने आवेदन क्या वे का उपयोग करें और इस प्रकार बंडल आकार में सुधार करने के लिए जा रहे हैं में आयात करना चाहिए साथ beta3 संस्करण में पदावनत किया गया था।

• एक कस्टमMyMaterialModule जो आयात/निर्यात घटकों बनाएं कि आपके आवेदन की आवश्यकता है और अपने आवेदन में अन्य (फीचर) मॉड्यूल से आयात किया जा सकता:

  डेवलपर्स अब 2 विकल्प हैं।

• सीधे उस मॉड्यूल की आवश्यकता वाले व्यक्तिगत सामग्री मॉड्यूल आयात करें।

  import {MdButtonModule, MdCheckboxModule} from '@angular/material'; 
  
  @NgModule({ 
      imports: [MdButtonModule, MdCheckboxModule], 
      exports: [MdButtonModule, MdCheckboxModule], 
  }) 
  export class MyOwnCustomMaterialModule { } 
  

  तो फिर तुम तुम्हारा में से किसी में इस मॉड्यूल आयात कर सकते हैं:

उदाहरण के रूप में निम्नलिखित (material page से निकाले)

पहले दृष्टिकोण रखना।

दूसरा दृष्टिकोण:

• :

  import {MdButtonModule, MdCheckboxModule} from '@angular/material'; 
  
  @NgModule({ 
      ... 
      imports: [MdButtonModule, MdCheckboxModule], 
      ... 
  }) 
  export class PizzaPartyAppModule { } 
  

  अब आप सभी घटकों को PizzaPartyAppModule

  यह उल्लेख के निम्नलिखित के लायक है में घोषित में संबंधित सामग्री घटकों का उपयोग कर सकते हैं सामग्री के नवीनतम संस्करण के साथ, आपकोआयात करने की आवश्यकता हैBrowserAnimationsModule आपका मुख्य मॉड्यूल में आप, एनिमेशन

नवीनतम संस्करण डेवलपर्स अब हमेशा BrowserModule के बाद उनके package.json (सामग्री निर्भरता)
• आयात सामग्री मॉड्यूल को @angular/cdk जोड़ने की जरूरत के साथ
• काम करना चाहते हैं, तो के रूप में डॉक्स द्वारा कहा गया :

जो भी दृष्टिकोण का उपयोग करें, NgModules के लिए मॉड्यूल कोणीय के BrowserModule के बाद आयात करने के लिए कोणीय सामग्री आयात आदेश मामलों के रूप में, सुनिश्चित करें।

Answer 3

आप सभी सामग्री मॉड्यूल आयात करने के लिए, अपने खुद के मॉड्यूल बनाने चाहते हैं यानी material.module.ts और निम्न की तरह कुछ करें:

import { NgModule } from '@angular/core'; 
 
import * as MATERIAL_MODULES from '@angular/material'; 
 

 
export function mapMaterialModules() { 
 
    return Object.keys(MATERIAL_MODULES).filter((k) => { 
 
    let asset = MATERIAL_MODULES[k]; 
 
    return typeof asset == 'function' 
 
     && asset.name.startsWith('Mat') 
 
     && asset.name.includes('Module'); 
 
    }).map((k) => MATERIAL_MODULES[k]); 
 
} 
 
const modules = mapMaterialModules(); 
 

 
@NgModule({ 
 
    imports: modules, 
 
    exports: modules 
 
}) 
 
export class MaterialModule { }

फिर अपने app.module.ts