Question

我需要在项目的多个组件中进行加载。因此，我不需要反复在组件之间重复相同的HTML，而是需要知道什么是不重复代码的最佳方法，但是我不知道这是否正确。我创建了一个名为loading-graphic的组件，并将其绑定到各个组件的每个HTML文件中。我读过有关ngTemplateOutlet和ngContent的信息，但说实话，在这种情况下使用它是没有道理的（而且我也不明白...我是初学者）。那么，我应该打赌什么呢？谢谢。

Answer 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>

我在Account组件内使用Search组件，下面是代码示例。在HTML文件中，我指的是app-search CSS选择器，并通过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>

希望这很清楚。

Answer 2

我认为加载组件并不是一个坏想法。在您的应用程序根组件中使用加载组件。您可以使用loading.service和拦截器来显示或隐藏组件。您将为每个API调用自动获得一个加载指示器。

样本：https://medium.com/@zeljkoradic/loader-bar-on-every-http-request-in-angular-6-60d8572a21a9

Angular-在多个组件中包含html的最佳方法是什么？

2 个答案: