【Angular开发】Angular中的高级组件

在这个博客中，我将解释Angular中的几个高级组件和机制，它们增强了灵活性、可重用性和性能。

通过熟悉这些高级组件和机制，您可以提高您的Angular开发技能，并在应用程序中利用灵活性、可重用性和性能优化的能力。让我们开始吧！

NgContent

NgContent，或Angular中的内容投影，通过将内容从外部投影到组件中，可以实现灵活和可重用的组件。当您希望动态地将内容传递给组件时，通常会使用它。

还有Input和Outputoperator，它们的作用与NgContent组件相同。输入操作符允许组件从外部接收数据，而输出操作符允许组件向外部发出事件。所以这两个操作符只处理数据。当涉及到NgContent时，它用于投影组件的内容，如HTML代码，您可以动态指定它们。通过这种方式，增加了组件的灵活性，并确保了可重用性。

让我们从一个简单的例子开始。想象一下，您想要创建一个包含标题、作者姓名、日期和内容的博客文章组件。您可以创建这样的组件：

// Blog Post Component
@Component({
selector: 'app-blog-post',
  template: `
    <div class="blog-post">
      <h2>{{ title }}</h2>
      <p class="author">Author: {{ author }}</p>
      <p class="date">Date: {{ date }}</p>
      <ng-content select=".blog-post-content"></ng-content>
      <ng-content select=".blog-post-sidebar"></ng-content>
    </div>
  `,
})
export class BlogPostComponent {
  @Input() title: string;
  @Input() author: string;
  @Input() date: string;
}

在此组件中，<ng content></ng content>标记用于指定内容的投影位置。使用该组件时，可以按如下方式投影内容：

// Home Component
@Component({
  selector: 'app-home',
  template:`
  <h1> Home Component</h1>
  <br>
  <app-blog-post title="Angular is a Powerful Framework" author="Atakan KOREZ" date="June 21, 2023">
    <p>Angular is a powerful framework for building modern web applications.</p>
    <p>...</p>
  </app-blog-post>
  `
})
export class HomeComponent {
}

Output:

多个NgContent

此外，让我们提供一个多ng内容使用的示例。假设您希望将内容投影在博客文章标题的下方和旁边。为了实现这一点，您可以使用select关键字更新组件。此外，在没有选择任何内容的情况下发送的数据由NgContent接收，它没有选择器关键字（如果有的话）。示例如下：

// Blog Post Component
@Component({
  selector: 'app-blog-post',
  template: `
    <div class="blog-post">
      <h2>{{ title }}</h2>
      <p class="author">Author: {{ author }}</p>
      <p class="date">Date: {{ date }}</p>
      <ng-content select=".blog-post-content"></ng-content>
      <ng-content select=".blog-post-sidebar"></ng-content>

      <ng-content></ng-content>
    </div>
  `,
})
export class BlogPostComponent {
  @Input() title: string;
  @Input() author: string;
  @Input() date: string;
}

//Home Component
@Component({
  selector: 'app-home',
  template:`
  <h1> Home Component</h1>
  <br>
  <app-blog-post title="Angular is a Powerful Framework" author="Atakan KOREZ" date="June 21, 2023">
  <div class="blog-post-content">
    <p>Angular is a powerful framework for building modern web applications.</p>
    <p>...</p>
  </div>
  <div class="blog-post-sidebar">
    <p>Other posts by the author:</p>
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>

Rest without any selector
</app-blog-post>
  `
})
export class HomeComponent {
}

Output:

NgContainer

NgContainer充当占位符，动态地包含在Angular中配置的图像。它在创建和管理重复出现的元素时提供了额外的灵活性，尤其是在与*ngFor等构造一起使用时。

你可以说span元素也可以用于这个过程，你可能会问为什么我们使用NgContainer而不是span。你说得对，但当性能突出时，与使用span相比，NgContainer是一种性能非常好的方法。让我试着用下面的例子来解释这个事实。

@Component({
  selector: 'app-root',
  template: `
    <h1> App Component</h1>
    <br>  
    <div class="mt-5">
      <ul>
        <span *ngFor="let product of products">
          <li *ngIf="product.available">{{ product.productName }}</li>
        </span>
      </ul>
    </div>

    <div class="mt-5">
      <ul>
        <ng-container *ngFor="let product of products">
          <li *ngIf="product.available">{{ product.productName }}</li>
        </ng-container>
      </ul>
    </div>
  `,
})
export class AppComponent {
  products: any[] = [
    { productName: 'Pencil', available: true },
    { productName: 'Book', available: false },
    { productName: 'Notebook', available: true },
    { productName: 'Eraser', available: false },
    { productName: 'School Bag', available: true },
  ];
}

在上面的示例代码中，Products数组的元素根据其可用状态在页面上列出。使用span和ngContainer列出了相同的元素。到目前为止，一切都很正常，但当我们检查页面的HTML输出时，就会出现差异。

输出：

从输出中可以看出；当使用span时，5 lielement是在不注意可用属性的情况下创建的，而使用ngContainer只会创建与可用元素数量一样多的元素。这样可以使HTML代码更干净、更高效。

在这些关键信息之后，我希望您从现在起永远使用ngContainer：）

NgTemplate

NgTemplate允许在Angular中的HTML模板中创建部分或区域。NgContainer和NgTemplate在渲染行为方面有区别。与自动渲染的NgContainer不同，NgTemplate需要显式调用并包含在渲染过程中才能可见。

@Component({
  selector: 'app-root',
  template: `
    <h1> App Component</h1>
    <br>  
    <ng-container *ngTemplateOutlet="template1">
      Container info...
    </ng-container>
    <ng-template #template1>
      Template info...
    </ng-template>
  `,
})
export class AppComponent {
}

Output:

从Output中可以看到，ngTemplate覆盖了ngContainer。此外，在Angular项目中，NgContainer经常与ngIf和ngSwitch等结构一起使用。因此，以可控的方式容易地处理向页面操作添加/移除新元素。

//ngIf example

<ng-template #myTemplate>
  <p>This template is rendered conditionally.</p>
</ng-template>

<div *ngIf="showTemplate; then myTemplate"></div>

//ngSwitch example

<ng-template #templateOne>
  <p>This is template one.</p>
</ng-template>

<ng-template #templateTwo>
  <p>This is template two.</p>
</ng-template>

<div [ngSwitch]="value">
  <div *ngSwitchCase="'A'">
    <ng-container [ngTemplateOutlet]="templateOne"></ng-container>
  </div>
  <div *ngSwitchCase="'B'">
    <ng-container [ngTemplateOutlet]="templateTwo"></ng-container>
  </div>
</div>

ngTemplateOutletContext：我们可以使用ngTemplateOutlet Context向ngTemplate提供绑定数据。这允许我们将值传递给ngTemplate内部的变量。以下是一个示例：

<ng-template #myTemplate let-name="name">
  <p>Hello, {{ name }}!</p>
</ng-template>

<ng-container [ngTemplateOutlet]="myTemplate" [ngTemplateOutletContext]="{ name: 'Atakan' }"></ng-container>

在上面的示例中，ngTemplateOutletContext用于将值“Atakan”分配给名称变量，然后在ngTemplate中使用该值。这种控制机制使我们能够以更灵活和动态的方式使用ngTemplate。

Renderer2

Renderer2是一种服务，用于以独立于平台的方式执行DOM操作，而不是直接操纵DOM。Renderer2遵循Angular的安全模型，并确保跨平台兼容性，这使得它在使用Angular Universal等平台时特别有用。以下是使用Renderer2而不是JS或JQuery来操作DOM的一些优点：

• 平台独立性：Renderer2为执行DOM操作提供了一个特定于平台的后端，允许Angular应用程序在不同的平台上工作。
• 安全性：Renderer2的操作符合Angular的安全模型。Renderer2允许安全的DOM操作，而不是直接的DOM操作。
• 性能和优化：Renderer2优化了Angular的更改检测机制，并更有效地应用更改。更改可以在单个更新周期内分批进行，以提高性能。

以下是一个示例：

@Component({
  selector: 'app-example',
  template: `
    <button (click)="changeColor()">Change Color</button>
  `,
})
export class ExampleComponent {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  changeColor() {
    const button = this.elementRef.nativeElement.querySelector('button');
    this.renderer.setStyle(button, 'background-color', 'blue');
    this.renderer.setStyle(button, 'color', 'white');
  }
}

在上面的示例中，我们创建了一个名为ExampleComponent的组件。Renderer2被注入到组件的构造函数中。changeColor（）方法更改按钮的背景色和文本色。DOM操作是通过Renderer2执行的，允许安全地分配样式属性。因此，使用Renderer2可以确保Angular应用程序更加安全、可移植和高性能。

结论

在这个博客中，我解释了Angular中增强灵活性、可重用性和性能的高级组件和机制。通过利用这些组件和机制，开发人员可以实现灵活和可重用的组件、干净高效的代码、条件呈现和安全的DOM操作，从而增强Angular应用程序。

通过将这些高级组件和机制集成到Angular项目中，您可以解锁新级别的灵活性、可重用性和性能优化。利用NGContent、NgContainer、NgTemplate和Renderer2的强大功能，轻松构建健壮、动态的应用程序。