در مطلب «
کنترل نرخ ورود اطلاعات در برنامه‌های Angular» جزئیات پیاده سازی جستجوی همزمان با تایپ کاربر، بررسی شدند. در اینجا می‌خواهیم از اطلاعات آن مطلب جهت پیاده سازی یک AutoComplete جستجوی نام کاربران که اطلاعات آن از سرور تامین میشوند، استفاده کنیم:
استفاده از کامپوننت AutoComplete کتابخانه‌ی Angular Material
کتابخانه‌ی Angular Material به همراه یک کامپوننت
Auto Complete نیز هست. در اینجا قصد داریم آن‌را در یک صفحه‌ی دیالوگ جدید نمایش دهیم و با انتخاب کاربری از لیست توصیه‌های آن و کلیک بر روی دکمه‌ی نمایش آن کاربر، جزئیات کاربر یافت شده را نمایش دهیم.
به همین جهت ابتدا کامپوننت جدید search-auto-complete را به صورت زیر به مجموعه‌ی کامپوننت‌های تعریف شده اضافه می‌کنیم:
ng g c contact-manager/components/search-auto-complete --no-spec
همچنین چون قصد داریم آن‌را درون یک popup نمایش دهیم، نیاز است به ماژول contact-manager\contact-manager.module.ts مراجعه کرده و آن‌را به لیست entryComponents نیز اضافه کنیم:
import { SearchAutoCompleteComponent } from "./components/search-auto-complete/search-auto-complete.component";
@NgModule({
entryComponents: [
SearchAutoCompleteComponent
]
})
export class ContactManagerModule { }
در ادامه برای نمایش این کامپوننت به صورت popup، دکمه‌ی جدید جستجو را به toolbar اضافه می‌کنیم:
برای این منظور به فایل toolbar\toolbar.component.html مراجعه کرده و دکمه‌ی جستجو را پیش از دکمه‌ی نمایش منو، قرار می‌دهیم:
<span fxFlex="1 1 auto"></span>
<button mat-button (click)="openSearchDialog()">
<mat-icon>search</mat-icon>
</button>
<button mat-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
با این کدها برای مدیریت متد openSearchDialog در فایل toolbar\toolbar.component.ts
@Component()
export class ToolbarComponent {
constructor(
private dialog: MatDialog,
private router: Router) { }
openSearchDialog() {
const dialogRef = this.dialog.open(SearchAutoCompleteComponent, { width: "650px" });
dialogRef.afterClosed().subscribe((result: User) => {
console.log("The SearchAutoComplete dialog was closed", result);
if (result) {
this.router.navigate(["/contactmanager", result.id]);
}
});
}
}
در اینجا توسط سرویس MatDialog، کامپوننت SearchAutoCompleteComponent به صورت پویا بارگذاری شده و به صورت یک popup نمایش داده میشود. سپس مشترک رخداد بسته شدن آن شده و بر اساس اطلاعات کاربری که توسط آن بازگشت داده میشود، سبب هدایت صفحه‌ی جاری به صفحه‌ی جزئیات این کاربر یافت شده، خواهیم شد.
کنترلر جستجوی سمت سرور و سرویس سمت کلاینت استفاده کننده‌ی از آن
در اینجا کنترلر و اکشن متدی را جهت جستجوی قسمتی از نام کاربران را مشاهده می‌کنید:
namespace MaterialAspNetCoreBackend.WebApp.Controllers
{
[Route("api/[controller]")]
public class TypeaheadController : Controller
{
private readonly IUsersService _usersService;
public TypeaheadController(IUsersService usersService)
{
_usersService = usersService ?? throw new ArgumentNullException(nameof(usersService));
}
[HttpGet("[action]")]
public async Task<IActionResult> SearchUsers(string term)
{
return Ok(await _usersService.SearchUsersAsync(term));
}
}
}
کدهای کامل متد SearchUsersAsync در
مخزن کد این سری موجود هستند.
از این کنترلر به نحو ذیل در برنامه‌ی Angular برای ارسال اطلاعات و انجام جستجو استفاده میشود:
import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable, throwError } from "rxjs";
import { catchError, map } from "rxjs/operators";
import { User } from "../models/user";
@Injectable({
providedIn: "root"
})
export class UserService {
constructor(private http: HttpClient) { }
searchUsers(term: string): Observable<User[]> {
return this.http
.get<User[]>(`/api/Typeahead/SearchUsers?term=${encodeURIComponent(term)}`)
.pipe(
map(response => response || []),
catchError((error: HttpErrorResponse) => throwError(error))
);
}
}
در اینجا از اپراتور pipe مخصوص RxJS 6x استفاده شده‌است.
تکمیل کامپوننت جستجوی کاربران توسط یک AutoComplete
پس از این مقدمات که شامل تکمیل سرویس‌های سمت سرور و کلاینت دریافت اطلاعات کاربران جستجو شده و نمایش صفحه‌ی جستجو به صورت یک popup است، اکنون می‌خواهیم محتوای این popup را تکمیل کنیم. البته در اینجا فرض بر این است که مطلب «
کنترل نرخ ورود اطلاعات در برنامه‌های Angular» را پیشتر مطالعه کرده‌اید و با جزئیات آن آشنایی دارید.
تکمیل قالب search-auto-complete.component.html <h2 mat-dialog-title>Search</h2>
<mat-dialog-content>
<div fxLayout="column">
<mat-form-field class="example-full-width">
<input matInput placeholder="Choose a user" [matAutocomplete]="auto1"
(input)="onSearchChange($event.target.value)">
</mat-form-field>
<mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFn"
(optionSelected)="onOptionSelected($event)">
<mat-option *ngIf="isLoading" class="is-loading">
<mat-spinner diameter="50"></mat-spinner>
</mat-option>
<ng-container *ngIf="!isLoading">
<mat-option *ngFor="let user of filteredUsers" [value]="user">
<span>{{ user.name }}</span>
<small> | ID: {{user.id}}</small>
</mat-option>
</ng-container>
</mat-autocomplete>
</div>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button color="primary" (click)="showUser()">
<mat-icon>search</mat-icon> Show User
</button>
<button mat-button color="primary" [mat-dialog-close]="true">
<mat-icon>cancel</mat-icon> Close
</button>
</mat-dialog-actions>
در این مثال چون کامپوننت search-auto-complete به صورت یک popup ظاهر خواهد شد، ساختار عنوان، محتوا و دکمه‌های دیالوگ در آن پیاده سازی شده‌اند.
سپس نحوه‌ی اتصال یک Input box معمولی را به کامپوننت mat-autocomplete مشاهده می‌کنید که شامل این موارد است:
- جعبه متنی که قرار است به یک mat-autocomplete متصل شود، توسط دایرکتیو matAutocomplete به template reference variable تعریف شده‌ی در آن autocomplete اشاره می‌کند. برای مثال در اینجا این متغیر auto1 است.
- برای انتقال دکمه‌های فشرده شده‌ی در input box به کامپوننت، از رخداد input استفاده شده‌است. این روش با هر دو نوع حالت مدیریت فرم‌های Angular سازگاری دارد و کدهای آن یکی است.
در کامپوننت mat-autocomplete این تنظیمات صورت گرفته‌اند:
- در لیست ظاهر شده‌ی توسط یک autocomplete، هر نوع ظاهری را می‌توان طراحی کرد. برای مثال در اینجا نام و id کاربر نمایش داده میشوند. اما برای تعیین اینکه پس از انتخاب یک آیتم از لیست، چه گزینه‌ای در input box ظاهر شود، از خاصیت displayWith که در اینجا به متد displayFn کامپوننت متصل شده‌است، کمک گرفته خواهد شد.
- از رخداد optionSelected برای دریافت آیتم انتخاب شده، در کدهای کامپوننت استفاده میشود.
- در آخر کار نمایش لیستی از کاربران توسط mat-optionها انجام میشود. در اینجا برای اینکه بتوان تاخیر دریافت اطلاعات از سرور را توسط یک mat-spinner نمایش داد، از خاصیت isLoading تعریف شده‌ی در کامپوننت استفاده خواهد شد.
تکمیل کامپوننت search-auto-complete.component.ts
کدهای کامل این کامپوننت را در ادامه مشاهده می‌کنید:
import { Component, OnDestroy, OnInit } from "@angular/core";
import { MatAutocompleteSelectedEvent, MatDialogRef } from "@angular/material";
import { Subject, Subscription } from "rxjs";
import { debounceTime, distinctUntilChanged, finalize, switchMap, tap } from "rxjs/operators";
import { User } from "../../models/user";
import { UserService } from "../../services/user.service";
@Component({
selector: "app-search-auto-complete",
templateUrl: "./search-auto-complete.component.html",
styleUrls: ["./search-auto-complete.component.css"]
})
export class SearchAutoCompleteComponent implements OnInit, OnDestroy {
private modelChanged: Subject<string> = new Subject<string>();
private dueTime = 300;
private modelChangeSubscription: Subscription;
private selectedUser: User = null;
filteredUsers: User[] = [];
isLoading = false;
constructor(
private userService: UserService,
private dialogRef: MatDialogRef<SearchAutoCompleteComponent>) { }
ngOnInit() {
this.modelChangeSubscription = this.modelChanged
.pipe(
debounceTime(this.dueTime),
distinctUntilChanged(),
tap(() => this.isLoading = true),
switchMap(inputValue =>
this.userService.searchUsers(inputValue).pipe(
finalize(() => this.isLoading = false)
)
)
)
.subscribe(users => {
this.filteredUsers = users;
});
}
ngOnDestroy() {
if (this.modelChangeSubscription) {
this.modelChangeSubscription.unsubscribe();
}
}
onSearchChange(value: string) {
this.modelChanged.next(value);
}
displayFn(user: User) {
if (user) {
return user.name;
}
}
onOptionSelected(event: MatAutocompleteSelectedEvent) {
console.log("Selected user", event.option.value);
this.selectedUser = event.option.value as User;
}
showUser() {
if (this.selectedUser) {
this.dialogRef.close(this.selectedUser);
}
}
}
- در ابتدای کار کامپوننت، یک modelChanged از نوع Subject اضافه شده‌است. در این حالت با فراخوانی متد next آن در onSearchChange که به رخداد input جعبه‌ی متنی دریافت اطلاعات متصل است، کار انتقال این تغییرات به اشتراک ایجاد شده‌ی به آن در ngOnInit انجام میشود. در اینجا بر اساس نکات مطلب «
کنترل نرخ ورود اطلاعات در برنامه‌های Angular»، عبارات وارد شده، به سمت سرور ارسال و در نهایت نتیجه‌ی آن به خاصیت عمومی filteredUsers که به حلقه‌ی نمایش اطلاعات mat-autocomplete متصل است، انتساب داده میشود. در ابتدای اتصال به سرور، خاصیت isLoading به true و در پایان عملیات به false تنظیم خواهد شد تا mat-spinner را نمایش داده و یا مخفی کند.
- توسط متد displayFn، عبارتی که در نهایت پس از انتخاب از لیست نمایش داده شده در input box قرار می‌گیرد، مشخص خواهد شد.
- در متد onOptionSelected، می‌توان به شیء انتخاب شده‌ی توسط کاربر از لیست mat-autocomplete دسترسی داشت.
- این شیء انتخاب شده را در متد showUser و توسط سرویس MatDialogRef به کامپوننت toolbar که در حال گوش فرادادن به رخداد بسته شدن کامپوننت جاری است، ارسال می‌کنیم. به این صورت است که کامپوننت toolbar می‌تواند کار هدایت به جزئیات این کاربر را انجام دهد.
کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید.
برای اجرای آن:
الف) ابتدا به پوشه‌ی src\MaterialAngularClient وارد شده و فایل‌های restore.bat و ng-build-dev.bat را اجرا کنید.
ب) سپس به پوشه‌ی src\MaterialAspNetCoreBackend\MaterialAspNetCoreBackend.WebApp وارد شده و فایل‌های restore.bat و dotnet_run.bat را اجرا کنید.
اکنون برنامه در آدرس https://localhost:5001 قابل دسترسی است.
