Основываясь на вашем вопросе, я думаю, что создание повторно используемых компонентов с NgTemplateOutlet было бы лучшим решением, чтобы избежать повторения HTML в разных шаблонах компонентов. Он позволяет вам передавать параметры на основе вашего хост-компонента и облегчает тестирование и разработку приложения Angular, поскольку он позволяет легко модифицировать многократно используемый компонент для различных случаев использования без необходимости изменения отдельных компонентов самостоятельно.
Поскольку вы новичок, я собираюсь проиллюстрировать простой способ использования NgTemplateOutlet, однако позже углубимся в «Шаблоны и штампы».
Представьте, что у вас есть многократно используемый компонент поиска, где вы хотите скрыть флажок на базе родительского компонента. Ваш шаблон будет выглядеть ниже.
мы передаем данные из родительского компонента в дочерний / поисковый компонент, используя @Input и привязку свойств, поэтому мы определяем, какие флажки скрывать на основе родительского компонента.
вот пример кода для компонента поиска
search.component.ts
======================
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
@Component({
selector: 'app-search',
templateUrl: './app-search.component.html',
styleUrls: ['./app-search.component.css']
})
export class AppSearchComponent implements OnInit {
accountName: string = '';
@Output() accountSearchChange = new EventEmitter<string>(); //1. Event Binding to pass data from Child to Parent Component ->Int
@Input() searchMode: 'account' | 'holder' | 'distribution' = 'account'; //Use NgTemplateOutlet for reusable componenet
constructor() { }
ngOnInit() {
}
//2. Event Binding to pass data from Child to Parent Component ->Invoke Emit
doSearchFilter(searchText: string) {
console.log('Search Child: doSearchFilter -> ' + searchText);
this.accountSearchChange.emit(searchText);
}
clearFilters() {
console.log('Account Search: Clear Filter is called');
this.accountName = '';
}
}
search.component.html
=====================
<ng-container [ngSwitch]="searchMode">
<div class="input-full-width" *ngSwitchCase="'account'">
<mat-checkbox class="example-container check-full-width">Show active and pending only</mat-checkbox>
</div>
<div class="input-full-width" *ngSwitchCase="'holder'">
<mat-checkbox class="example-container check-full-width">View only holders with missing requirements</mat-checkbox>
</div>
<div class="input-full-width" *ngSwitchCase="'holder'">
<mat-checkbox class="example-container check-full-width">View only active Holders</mat-checkbox>
</div>
</ng-container>
Я использую компонент «Поиск» внутри компонента «Учетная запись», ниже приведен пример кода.
в файле HTML я имею в виду селектор css app-search и передаю режим поиска, определенный в ts.
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';
import { Router } from "@angular/router";
import { Observable } from 'rxjs';
import { AccountService } from 'src/app/core/services/account.service';
import { Deal } from 'src/app/core/models/deal';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.css']
})
export class AccountsComponent implements OnInit, AfterViewInit {
displayedColumns: string[] = ['accountId', 'accountShortName', 'accountType'];
public dealDataSource = new MatTableDataSource<Deal>();
dealsObservable: Observable<Deal[]>;
searchMode = 'distribution';
isLoadingResults = true;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private router: Router, private api: AccountService) { }
......................................................
<app-search (accountSearchChange)='doFilter($event)' [searchMode]="searchMode"></app-search>
Надеюсь, это понятно.