Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Schritte zur Verwendung von UI-Frameworks und -Steuerelementen von Drittanbietern in Angular

Detaillierte Erläuterung der Schritte zur Verwendung von UI-Frameworks und -Steuerelementen von Drittanbietern in Angular

php中世界最好的语言
php中世界最好的语言Original
2018-05-03 14:54:192306Durchsuche

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendungsschritte des Drittanbieter-UIFrameworks und der Steuerung in Angular sowie Vorsichtsmaßnahmen Was sind das?

Material-UI-Methode installieren:

Offizielle Material-Website:

https://material.angular.io

Schritt 1:

npm install --save @angular/material @angular/cdk
Schritt 2:

npm install --save @angular/animations
Schritt 3:

angular.cli

../node_modules/@angular/material/prebuilt-themes/indigo-pink.css
oder

style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Schritt 4 :

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" rel="stylesheet">
Schritt 5:

  app.module.ts
  import {MatInputModule, MatCardModule, MatButtonModule} from "@angular/material";
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  imports:[
    BrowserAnimationsModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
  ]

So installieren Sie Ag-grid

Offizielle Website von Ag-grid : https ://www.ag-grid.com/

Schritt 1:

npm install --save ag-grid-angular ag-grid
Schritt 2:

angular.cli

"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/ag-theme-fresh.css"
Schritt 3 :

app.module.ts

imports:[
  AgGridModule.withComponents([])
],
exports:[
  AgGridModule
]

So installieren Sie NG-ZORRO

Offizielle Website von NG-ZORRO: https://ng.ant .design/ version/0.7.x/docs/introduce/zh

Schritt 1:

npm install ng-zorro-antd --save
Schritt 2:

Ersetzen Sie /src/app/app.module direkt durch der folgende Code Inhalt von .ts

Hinweis: NgZorroAntdModule.forRoot() muss im Root-Modul verwendet werden und NgZorroAntdModule muss im Untermodul verwendet werden

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { AppComponent } from './app.component';
@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  BrowserModule,
  FormsModule,
  HttpClientModule,
  BrowserAnimationsModule,
  NgZorroAntdModule.forRoot()
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }
Schritt 3:

Ändern Sie die .angular-Styles-Liste der cli.json-Datei

"styles": [
  "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
]
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Aufrufen der Baidu-Karte in Vue

So verwenden Sie JointJS-Attribute in vue

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von UI-Frameworks und -Steuerelementen von Drittanbietern in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn