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




angular-material (4)

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

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

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

मैंने कोशिश की: imports: ['MaterialModule'] लेकिन यह पदावनत है


चरण 1

yarn add @angular/material @angular/cdk @angular/animations

चरण 2 - एक नई फ़ाइल बनाएं (/myApp/src/app/material.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 {}

चरण 3 - आयात और उस नए बनाए गए मॉड्यूल को अपने app.module.ts में जोड़ें

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module'; // material module imported

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule // MAteria module added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

ब्रेकिंग परिवर्तन

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

कृपया CHANGELOG से CHANGELOG हमें और उत्तर मिलेगा!

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

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

'ऐप' फ़ोल्डर के अंदर फ़ाइल (material.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 {}

app.module.ts पर आयात

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 '[email protected]/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) के बजाय u सीधे 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';

इसलिए यह मामला u आयात नहीं करना चाहता

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

app.module.ts में


त्रुटि संदेश स्क्रीनशॉट देखने के लिए यहां क्लिक करें

यदि आप लोगों को यह त्रुटि "कंपाइलर। Js: 2430 अनकवर्ड एरर: अनपेक्षित निर्देश 'MatIcon' मॉड्यूल 'AppModule' द्वारा आयात हो रही है, तो कृपया @NgModule एनोटेशन जोड़ें।"

कृपया @ कोणीय / सामग्री से MatIcon आयात न करें।

बस नीचे आयात करें: '@ कोणीय / सामग्री' से {MatIconModule} आयात करें ;

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

आप नीचे कमांड चला सकते हैं। एनजी @ कोणीय / सामग्री जोड़ें


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

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

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

उदाहरण के रूप में निम्नलिखित लें ( material.angular.io/guide/getting-started से निकाला गया)

पहले दृष्टिकोण:

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MdButtonModule, MdCheckboxModule],
  exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

तब आप इस मॉड्यूल को आप में से किसी में भी आयात कर सकते हैं।

दूसरा तरीका:

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

अब आप PizzaPartyAppModule में घोषित सभी घटकों में संबंधित भौतिक घटकों का उपयोग कर सकते हैं

यह निम्नलिखित उल्लेख के लायक है:

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

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





angular-material