Notes d'étude angulaire : exemples d'intégration de cadres et de contrôles d'interface utilisateur tiers

Cet article présente principalement des notes d'étude angulaires et des exemples d'intégration de cadres et de contrôles d'interface utilisateur tiers. Il présente également en détail Material UI, Ag-grid et d'autres cadres. Il a une certaine valeur de référence.

Cet article présente des notes d'étude angulaire et des exemples d'intégration de frameworks et de contrôles d'interface utilisateur tiers. J'aimerais les partager avec vous :

é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- grille

é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

étape 1 :

npm install ng-zorro-antd --save

étape 2 :

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

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

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 :

Modifiez la liste de styles du fichier .angular-cli.json

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

Ce qui précède est ce que j'ai compilé pour vous, je l'espère. vous sera utile à l'avenir.

Articles connexes :

Explication détaillée de l'instance de composant dynamique personnalisé Vue

Explication détaillée de l'extension ElTableColumn de VUE dans element-ui

Exemple de comment revenir à la page d'accueil de la page de partage d'applet WeChat

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!