Explication détaillée des étapes d'utilisation de frameworks et de contrôles d'interface utilisateur tiers dans Angular

Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation de l'interface utilisateur tierceframework et du contrôle dans Angular, ainsi que des précautions Qu'est-ce que c'est ? Voici des cas réels.

Installer la méthode Material UI :

Site officiel de Material :

https://material.angular.io

étape 1 :

npm install --save @angular/material @angular/cdk

étape 2 :

npm install --save @angular/animations

étape 3 :

angular.cli

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

ou

style.css

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

étape 4 :

index.html

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

étape 5 :

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

Comment installer Ag-grid

Site officiel d'Ag-grid : https://www.ag-grid.com/

étape 1 :

npm install --save ag-grid-angular ag-grid

étape 2 :

angular.cli

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

étape 3 :

app.module.ts

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

Comment installer NG-ZORRO

Site officiel de NG-ZORRO : https://ng.ant.design/version/0.7.x/docs/introduce/zh

étape 1 :

npm install ng-zorro-antd --save

étape 2 :

Remplacez directement le contenu de /src/app/app.module.ts par le code suivant

Remarque : NgZorroAntdModule.forRoot() doit être utilisé dans le module racine, et NgZorroAntdModule doit être utilisé dans le sous-module

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 { }

étape 3 :

Modifier la liste des styles du fichier .angular-cli.json

"styles": [
  "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
]

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, et plus encore. Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour appeler la carte Baidu dans Vue

Comment utiliser l'attribut jointjs en vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!