今回は Angular で UI フレームワークとコントロールを使用する方法についてお届けします。 Angular で UI フレームワークとコントロールを使用する際の注意点は何ですか? 実際の事例を見てみましょう。
ステップ 1:
npm install --save @angular/material @angular/cdk
ステップ 2:
npm install --save @angular/animations
ステップ 3:
angular.cli
../node_modules/@angular/material/prebuilt-themes/indigo-pink.css
or
style.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
ステップ 4:
index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" rel="stylesheet">
ステップ 5:
りーAg-gridのインストール方法
Ag-grid公式ウェブサイト: https://www.ag-grid.com/
ステップ1:
app.module.ts import {MatInputModule, MatCardModule, MatButtonModule} from "@angular/material"; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; imports:[ BrowserAnimationsModule, MatInputModule, MatCardModule, MatButtonModule, ]
ステップ2:
angular.cli
npm install --save ag-grid-angular ag-grid
ステップ3 :
app.module.ts
"../node_modules/ag-grid/dist/styles/ag-grid.css", "../node_modules/ag-grid/dist/styles/ag-theme-fresh.css"
NG-ZORROのインストール方法
NG-ZORRO公式サイト: https://ng.ant.design/version/0.7.x/docs/introduce/zh
ステップ 1:
imports:[ AgGridModule.withComponents([]) ], exports:[ AgGridModule ]
ステップ 2:
/src/app/app.module.ts の内容を次のコードに直接置き換えます
注: NgZorroAntdModule.forRoot() はルート モジュールで使用する必要があり、NgZorroAntdModuleサブモジュールで使用する必要があります
npm install ng-zorro-antd --save
ステップ 3:
.angular-cli.json ファイルのスタイル リストを変更します
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 { }
この記事の事例を読んだ後は、この方法を習得したと思います。興味深い情報が満載です。PHP 中国語 Web サイトの他の関連記事にもご注目ください。
推奨読書:
H5 タッチ イベントでのユーザーのスライド方向を決定する方法
以上がAngular は UI フレームワークとコントロールを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。