搜索引擎使用技巧有哪些? 全文搜索引擎使用技巧( 四 )

角前端
电影/演员过滤器显示在延迟加载的 Angular 模块filter-actors和filter-movies 中。这些模块是延迟加载的，以使应用程序启动更快，因为它们是 Ng-Bootstrap 库组件的唯一用户。模板filter-movies.component.html使用 Offcanvas 组件和 Datepicker 组件作为过滤条件：

<ng-template #content let-offcanvas>
<div class="offcanvas-header">
<h4 class="offcanvas-title" id="offcanvas-basic-title"
i18n="@@filtersAvailiable">Filters availiable</h4>
<button type="button" class="btn-close" aria-label="Close"
(click)="offcanvas.di *** iss('Cross click')"></button>
</div>
<div class="offcanvas-body">
<form>
<div class="select-range">
<div class="mb-3 me-1">
<label for="releasedAfter" i18n="@@filterMoviesReleasedAfter">
Released after</label>
<div class="input-group">
<input id="releasedBefore" class="form-control"
[(ngModel)]="ngbReleaseFrom" placeholder="yyyy-mm-dd"
name="dpFrom" ngbDatepicker #dpFrom="ngbDatepicker">
<button class="btn btn-outline-secondary calendar"
(click)="dpFrom.toggle()" type="button"></button>
</div>
</div>
...
</ng-template>
<div class="container-fluid">
<div>
<div class="row">
<div class="col">
<button class="btn btn-primary filter-change-btn"
(click)="showFilterActors()"
i18n="@@filterMoviesFilterActors">Filter<br/>Actors</button>
<button class="btn btn-primary open-filters"
(click)="open(content)"
i18n="@@filterMoviesOpenFilters">Open<br/>Filters</button>
...

具有 <ng-template ...> 模板变量“#content”以在组件中识别它。
<div class="offcanvas-header">包含标签及其关闭按钮。
包含日期选择器组件，其中<div class="offcanvas-body">包含值的输入和打开日期选择器的按钮。模板变量#dpFrom="ngbDatepicker"获取 datepicker 对象。该按钮在“单击”操作中使用它来切换日期选择器。
<div class="container-fluid">包含按钮和结果表。
该按钮Filter<br/>Actors执行showFilterActors()导航到 filter-actors 模块的 ***。
该按钮Open<br/>Filters执行 'open(content)'*** 以打开<ng-template>包含模板变量 '#content' 的 Offcanvas 组件。
filter-movies.component.ts显示Offcanvas 组件，调用过滤器，并显示结果：

@Component({
selector: 'app-filter-movies',
templateUrl: './filter-movies.component.html',
styleUrls: ['./filter-movies.component.scss']
})
export class FilterMoviesComponent implements OnInit {
protected filteredMovies: Movie[] = [];
protected filtering = false;
protected selectedGeneresStr = '';
protected generes: Genere[] = [];
protected closeResult = '';
protected filterCriteria = new MovieFilterCriteria();
protected ngbReleaseFrom: NgbDateStruct;
protected ngbReleaseTo: NgbDateStruct;

constructor(private offcanvasService: NgbOffcanvas,
public ngbRatingConfig: NgbRatingConfig,
private movieService: MoviesService, private router: Router) {}

...

public open(content: unknown) {
this.offcanvasService.open(content,
{ariaLabelledBy: 'offcanvas-basic-title'}).result.then((result) =>
{ this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Di *** issed ${this.getDi *** issReason(reason)}`;
});
}

public showFilterActors(): void {
this.router.navigate(['/filter-actors']);
}

private getDi *** issReason(reason: unknown): void {
//console.log(this.filterCriteria);
if (reason === OffcanvasDi *** issReasons.ESC) {
return this.resetFilters();
} else {
this.filterCriteria.releaseFrom = !this.ngbReleaseFrom ? null :
new Date(this.ngbReleaseFrom.year, this.ngbReleaseFrom.month,
this.ngbReleaseFrom.day);
this.filterCriteria.releaseTo = !this.ngbReleaseTo ? null :