Блог

Главная - Вопросы по программированию - Angular — Какой наилучший способ включить html в несколько компонентов?

Angular — Какой наилучший способ включить html в несколько компонентов?

#html #angular #include #ng-template #ng-content

#HTML #angular #включить #ng-template #ng-content

Вопрос:

Мне нужно загрузить несколько компонентов моего проекта. Итак, вместо того, чтобы снова и снова помещать один и тот же HTML-код в компоненты, мне нужно знать, каков наилучший способ не повторять код, но я не знаю, правильно ли это делать. Я создал компонент с именем loading-graphic , который я привязываю к каждому HTML-файлу соответствующих компонентов. Я читал о ngTemplateOutlet и ngContent , но, честно говоря, в моей голове не имеет смысла использовать его для этого случая (и я тоже этого не понимаю… Я новичок в этом). Итак, на что мне следует сделать ставку? Спасибо.

Ответ №1:

Основываясь на вашем вопросе, я думаю, что создание повторно используемых компонентов с помощью 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-файле я ссылаюсь на app-search css selector и передаю режим поиска, определенный в 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>

Надеюсь, это понятно.

Ответ №2:

я думаю, что загрузочный компонент — неплохая идея. Используйте компонент загрузки в вашем приложении -корневой компонент. Вы можете использовать loading.service и перехватчик для отображения или скрытия компонента. Вы будете автоматически получать индикатор загрузки для каждого вызова API.

пример:https://medium.com/@zeljkoradic/loader-bar-on-every-http-request-in-angular-6-60d8572a21a9