ここ数日間の記事で、私たちはangularについて多くのことを学びました。今回は小さな製品を考え出します。
angualr ng-zorroと組み合わせることで、バックエンド システムを迅速かつ標準化して開発できます。 [関連チュートリアルの推奨事項: 「Angular チュートリアル」]
システム関数には以下が含まれます:
すべてのサービスの削除 シミュレートされたデータを使用します。
やりましょう。
ng-zorro angular と組み合わせた
より人気のあるui angular
と思いAnt Design
熟知しています。そこで、ここではNG-ZORROフレームワークと組み合わせます。 Ant DesignのVueまたはReactバージョンに慣れている場合は、シームレスに接続できると思います ~
angular-cli再利用して、プロジェクトng-zorroを生成します。
ng-zorro追加は非常に簡単です。ng ng-zorroルート ディレクトリに入り、 ng add ng-zorro-antdを実行します。
もちろん、
npm install ng-zorro-antdを実行して追加することもできますが、お勧めしません。
ng-zorroを結合した後、プロジェクトnpm run start実行すると、ページhttp://localhost:4200に次の図が表示されます。
悪くはありません。
構成ルーティングを
hashルーティングに変更し、ユーザー ルーティングを追加しました。必要なのは、いくつかの小さな変更だけです。
アイデア:
まずページuserリストページを追加し、 ng-zorroのtableコンポーネントを使用して
同じページを共有するユーザーのページを追加および変更form ng-zorro
ng-zorro のフォームコンポーネントのページ削除機能を使用してポップアッププロンプトを直接使用します。 、 ng-zorro
ルーティング ファイルを調整する
ために必要に応じてng-zorroコンポーネントを導入します
// app.module.ts
ng-zorro導入する必要があります。
import { ReactiveFormsModule } から '@angular/forms';
import { NzTableModule } から 'ng-zorro-antd/table';
import { NzModalModule } から 'ng-zorro-antd/modal';
import { NzButtonModule } から 'ng-zorro-antd/button';
import { NzFormModule } から 'ng-zorro-antd/form';
import { NzInputModule } から 'ng-zorro-antd/input';
// ...
imports: [ // 宣言で NzTableModule を宣言する代わりに imports に追加します。
NzModalモジュール、
Nzボタンモジュール、
NzFormモジュール、
リアクティブフォームモジュール、
NzInputモジュール
]、シンプルで理解しやすい原則、ルーティングをネストするためにchildren使用しません:
// app.routing.module.ts
import { NgModule } から '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { WelcomeComponent } から './pages/welcome/welcome.component';
import { UserComponent } から './pages/user/user.component';
import { UserInfoComponent } から './pages/user/user-info/user-info.component';
//関連ルート const Routes: Routes = [
{
パス： ''、
パスマッチ: 'フル'、
リダイレクト先: '/welcome'
}、
{
パス: 'ようこそ'、
コンポーネント: ウェルカムコンポーネント
}、
{
パス: 'ユーザー'、
コンポーネント: ユーザーコンポーネント
}、
{
パス: 'ユーザー/追加',
コンポーネント: ユーザー情報コンポーネント
}、
{
パス: 'user/edit/:uuid',
コンポーネント: ユーザー情報コンポーネント
}
];
@NgModule({
インポート: [RouterModule.forRoot(
ルート、
{
useHash: true,//ハッシュ モードを使用する preloadingStrategy: PreloadAllModules
}
)]、
エクスポート: [ルーターモジュール]
})
export class AppRoutingModule { }メニューの変更
スキャフォールディングを使用して生成されたメニューが、開発する必要がある機能と一致しません。
// app.component.html
<nz-layout class="app-layout">
<nz-sider class="メニューサイドバー"
NZ折りたたみ可能
nzWidth="256px"
nzBreakpoint="md"
[(nzCollapsed)]="isCollapsed"
[nzTrigger]="null">
<div class="サイドバーロゴ">
<!-- デフォルトでは、ロゴをクリックしてホームページに移動します -->
<a routerLink="/welcome">
<img src="https://ng.ant.design/assets/img/logo.svg" alt="ロゴ">
<h1>ン・ゾロ</h1>
</a>
</div>
<ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
<li nz-submenu nzOpen nzTitle="ユーザー管理" nzIcon="ダッシュボード">
<ul>
<li nz-menu-item nzMatchRouter>
<a routerLink="/user">ユーザー リスト</a>
</li>
</ul>
</li>
</ul>
</nz-sider>
<nz-レイアウト>
<nz-ヘッダー>
<div class="アプリヘッダー">
<span class="header-trigger" (click)="isCollapsed = !isCollapsed">
<i class="トリガー"
ニュージーランドのアイコン
[nzType]="isCollapsed ? 'メニュー展開' : 'メニュー展開'"
></i>
</スパン>
</div>
</nz-ヘッダー>
<nz-コンテンツ>
<div class="inner-content">
<ルーター アウトレット></ルーター アウトレット>
</div>
</nz-コンテンツ>
</nz-レイアウト>
</nz-layout>メニューの表示で、権限管理を行う必要がある場合は、バックエンドが値の転送と連携する必要があります。次に、関連する権限メニューをページにレンダリングし
、上記の基本的なコードで置き換えます。は次のとおりです。
ユーザー リストを完成させます。
次に、ユーザー リストのスケルトンを完成させますUI
ユーザー リストを取得する
// user.component.html と記述すると非常に便利です。
<nz-table #basicTable [nzData]="リスト">
<頭>
<tr>
<th>名前</th>
<th>位置</th>
<th>アクション</th>
</tr>
</thead>
<本体>
<!-- 取得したデータを走査 -->
<tr *ngFor="basicTable.data のデータを取得">
<td>{{data.name}}</td>
<td>{{data.position}}</td>
<td>
<a style="color: #f00;">削除</a>
</td>
</tr>
</tbody>
</nz-table> assetsフォルダーuser.json内のいくつかのデータをシミュレートしました:
{
「ユーザー」: [
{
"uuid": 1、
「名前」：「ジミー」、
"位置": "フロントエンド"
}、
{
"uuid": 2、
"名前": "ジム",
"位置": "バックエンド"
}
]、
「環境」：「開発」
サービスを作成した後、
ユーザーのデータを取得するために呼び出します:
// user.component.ts
import { Component, OnInit } から '@angular/core';
import { UserService } から 'src/app/services/user.service';
@成分（{
セレクター: 'アプリユーザー',
templateUrl: './user.component.html',
styleUrls: ['./user.component.scss']
})
エクスポート クラス UserComponent は OnInit を実装します {
公開リスト: 任意 = []
コンストラクタ（
プライベート読み取り専用 userService: UserService
) { }
ngOnInit(): void {
if(localStorage.getItem('users')) {
let obj = localStorage.getItem('users') '{}'
this.list = JSON.parse(obj)
} それ以外 {
this.getList()
}
}
// ユーザーリストを取得 getList() {
this.userService.getUserList().subscribe({
次: (データ: 任意) => {
localStorage.setItem('users', JSON.stringify(data.users))
this.list = データ.ユーザー
}、
エラー: (エラー: 任意) => {
コンソールログ(エラー)
}
})
}
バックエンド サービスが導入されていないため
、ここではlocalstorage使用してステータスを記録します。
上記を完了すると、次のようなリスト情報が取得されます。
ユーザーを追加および編集するには、
nameとpositionの 2 つのフィールドのみを含むフォームを作成するだけです。これら 2 つの関数はフォームを共有しています ~
htmlに追加します:
// user-info.component.html
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-control nzErrorTip="ユーザー名を入力してください!">
<input type="text" nz-input formControlName="username" placeholder="ユーザー名を入力してください" style="width: 160px;" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="ポジションを入力してください!">
<input type="text" nz-input formControlName="position" placeholder="位置を入力してください" style="width: 160px;"/>
</nz-form-control>
</nz-form-item>
<button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">確認</button>
</form>ページは次のようになります。
次に、追加または変更する論理的判断があります。接続にuuidが付いている場合は、編集を意味し、 show you the codes 。
// ユーザー情報.component.ts
import { Component, OnInit } から '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, ParamMap } from '@angular/router';
@成分（{
セレクター: 'アプリユーザー情報',
templateUrl: './user-info.component.html',
styleUrls: ['./user-info.component.scss']
})
エクスポート クラス UserInfoComponent は OnInit {を実装します。
パブリック isAdd: ブール値 = true;
パブリック userInfo: 任意 = []
パブリック UUID: 数値 = 0;
validateForm!: フォームグループ;
コンストラクタ（
プライベート FB: FormBuilder、
プライベートルート: ActivatedRoute、
) { }
ngOnInit(): void {
this.userInfo = JSON.parse(localStorage.getItem('users') || '[]')
this.route.paramMap.subscribe((params: ParamMap)=>{
this.uuid = parseInt(params.get('uuid') || '0')
})
// 編集状態なので識別子を設定 if(this.uuid) {
this.isAdd = false
}
if(this.isAdd) {
this.validateForm = this.fb.group({
ユーザー名: [null, [Validators.required]],
位置: [null, [Validators.required]]
});
} それ以外 {
let current = (this.userInfo.filter((item: any) => item.uuid === this.uuid))[0] ||
// 情報を埋め戻す this.validateForm = this.fb.group({
ユーザー名: [現在の名前, [検証者.必須]],
位置: [現在の位置, [バリデーター.必須]]
})
}
}
submitForm() {
// 送信内容に準拠していない場合は、エラーが報告されます if(!this.validateForm.valid) {
Object.values(this.validateForm.controls).forEach((control: any) => {
if（control？。invalid）{
コントロール?.markAsDirty();
control?.updateValueAndValidity({onlySelf: true });
}
})
戻る
}
// フォームデータを取得します const data = this.validateForm.value
// 新しいユーザーを追加 if(this.isAdd) {
let lastOne = (this.userInfo.length > 0 ? this.userInfo[this.userInfo.length-1] : {});
this.userInfo.push({
uuid: (lastOne.uuid ? (lastOne.uuid + 1) : 1),
名前：data.username、
位置：data.position
})
localStorage.setItem('users', JSON.stringify(this.userInfo))
} else { //ユーザーを編集、情報を更新 let mapList = this.userInfo.map((item: any) => {
if(item.uuid === this.uuid) {
戻る {
uuid：this.uuid、
名前: データ.ユーザー名、
位置: data.position
}
}
返品商品
})
localStorage.setItem('users', JSON.stringify(mapList))
}
}
まず、識別子 isAdd を設定します。
isAddは、 uuidが存在する場合はデフォルトで新しいユーザーに設定され、編集状態であることを示すfalse値に設定され、フォームにコンテンツが埋め込まれます。フォームの送信操作もこの識別子に従って判断されます。リスト情報の同期を確保するために、 localStorage情報を直接変更します。
削除機能については、
削除するかどうかを尋ねるモーダルダイアログボックスを導入します。
// ユーザー.コンポーネント.ts
// 削除 delete(data: any) {
this.modal.confirm（{
nzTitle: '<i>このユーザーを削除しますか?</i>',
nzOnOk: () => {
let users = JSON.parse(localStorage.getItem('users') || '[]');
let filterList = users.filter((item: any) => item.uuid !== data.uuid);
localStorage.setItem('users', JSON.stringify(filterList));
this.list = フィルターリスト
}
});
} 
削除されたデータを見つけて削除し、新しいユーザー データを再キャッシュして、 tableのユーザー リスト データを更新します。
これまでのところ、簡単なプロジェクトは正常に完了しています。 Gif使用して全体を見てみましょう。
【以上】