Angular - Какой лучший способ включить html в несколько компонентов? - PullRequest
Новая
       49

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

1 голос
/ 14 марта 2019

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

Ответы [ 2 ]

1 голос
/ 14 марта 2019

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

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

0 голосов
/ 14 марта 2019

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

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

...