Angular intègre en détail les cadres et les contrôles d'interface utilisateur tiers

Cette fois, je vais vous apporter des explications détaillées sur la façon d'utiliser Angular pour intégrer des frameworks d'interface utilisateur tiers. Ce qui suit est un cas pratique, jetons un coup d'œil. étape 1 :étape 2 :

étape 3 :

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

angular.cli

npm install --save @angular/animations

ou

style.css

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

étape 4 :

index.html

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

étape 5 :

Comment installer Ag-grid

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

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

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

étape 1 :

étape 2 :

angular.cli

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

étape 3 :

app.module.ts

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

Comment installer NG-ZORRO

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

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

étape 1 :

étape 2 :

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

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

npm install ng-zorro-antd --save

étape 3 :

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

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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

Explication détaillée des étapes de tests unitaires et E2E avec Angular CLI

Résumé du cas d'utilisation du document Vue

Appelez le plug-in de carte Baidu dans 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!