Angular의 구조적 지시문은 무엇입니까? 사용하는 방법?

이 글에서는 Angular의 구조적 지시어 패턴을 살펴보고, 구조적 지시어가 무엇인지, 어떻게 사용하는지 소개하겠습니다. 도움이 되길 바랍니다.

Angular에는 두 가지 유형의 지시어가 있습니다. Angular 中，有两种类型的指令。属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。

结构指令是 Angular 中最强大的特性之一，然而它们却频繁被误解。

如果你对学习 结构指令 感兴趣，那么现在我们就来接着阅读，并了解它们是什么，它们有什么用以及如何在项目中使用它们。【相关教程推荐：《angular教程》】

你将学到什么

在本文中，你将学到关于 Angular 结构指令模式的知识点。你会知道它们是什么并且怎么去使用它们。

学完本文，你将更好理解这些指令并在实际项目中使用它们。

Angular 结构指令是什么？

Angular 结构指令是能够更改 DOM 结构的指令。这些指令可以添加、移除或者替换元素。结构指令在其名字之前都有 * 符号。

在 Angular 中，有三种标准的结构化指令。

• *ngIf - 根据表达式返回的布尔值，有条件地包含一个模版（即条件渲染模版）
• *ngFor - 遍历数组
• *ngSwitch - 渲染每个匹配的是图

下面?是一个结构化指令的例子。语法长这样：

 <element ng-if="Condition"></element>

条件语句必须是 true 或者 false。

<div *ngIf="worker" class="name">{{worker.name}}</div>

Angular 生成一个 <ng-template> 的元素，然后应用 *ngIf 指令。这会将其转换为方括号 [] 中的属性绑定，比如 [ngIf]。<div> 的其余部分，包含类名，插入到 <ng-template> 里。比如：

<ng-template [ngIf]="worker">
  <div class="name">{{worker.name}}</div>
</ng-template>

Angular 结构指令是怎么工作的？

要使用结构指令，我们需要在 HTML 模版中添加一个带有指令的元素。然后根据我们在指令中设置的条件或者表达式添加、删除或者替换元素。

结构指令的例子

我们添加些简单的 HTML 代码。

app.component.html 文件内容如下：

<div style="text-align:center">
  <h1>
    Welcome 
  </h1>
</div>
<h2> <app-illustrations></app-illustrations></h2>

怎么使用 *ngIf 指令

我们根据条件来使用 *ngIf 来确定展示或者移除一个元素。ngIf 跟 if-else 很类似。

当表达式是 false 的时候，*ngIf 指令移除 HTML 元素。当为 true 时候，元素的副本会添加到 DOM 中。

完整的*ngIf 代码如下：

<h1>
	<button (click)="toggleOn =!toggleOn">ng-if illustration</button>
  </h1>
  <div *ngIf="!toggleOn">
  <h2>Hello </h2>
  <p>Good morning to you,click the button to view</p>
  </div>
  <hr>
  <p>Today is Monday and this is a dummy text element to make you feel better</p>
  <p>Understanding the ngIf directive with the else clause</p>

怎么使用 *ngFor 指令

我们使用 *ngFor 指令来遍历数组。比如：

<ul>

    <li *ngFor="let wok of workers">{{ wok }}</li>

</ul>

我们的组件 TypeScript 文件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-illustrations',
  templateUrl: './illustrations.component.html',
  styleUrls: ['./illustrations.component.css']
})
export class IllustrationsComponent implements OnInit {
  workers: any = [

    'worker 1',

    'worker 2',

    'worker 3',

    'worker 4',

    'worker 5',

  ]

  constructor() { }

  ngOnInit(): void {
  }

}

怎么使用 *ngSwitch 指令

译者加：这个指令实际开发很有用

我们使用 ngSwitch 来根据不同条件声明来决定渲染哪个元素。*ngSwitch 指令很像我们使用的 switch 语句。比如：

<div [ngSwitch]="Myshopping">
  <p *ngSwitchCase="&#39;cups&#39;">cups</p>
  <p *ngSwitchCase="&#39;veg&#39;">Vegetables</p>
  <p *ngSwitchCase="&#39;clothes&#39;">Trousers</p>
  <p *ngSwitchDefault>My Shopping</p>
</div>

在 typescript 中：

Myshopping: string = '';

我们有一个 MyShopping 变量，它有一个默认值，用于在模块中渲染满足条件的特定元素。

当条件值是 true 的时候，相关的元素就会被渲染到 DOM 中，其余的元素将被忽略。如果没有元素匹配，则渲染 *ngSwitchDefault 的元素到 DOM 中。

Angular 中我们什么时候需要用结构指令呢？

如果你想在 DOM 中添加或者移除一个元素的时候，你就应该使用结构指令。 当然，我们还可以使用它们来更改元素 CSS속성 지시문

DOM 요소의 모양이나 동작을 수정합니다.

구조적 지시어 DOM 요소를 추가하거나 제거하세요.

🎜구조적 지시어🎜는 Angular의 가장 강력한 기능 중 하나이지만 종종 오해를 받습니다. 🎜🎜🎜구조적 지시문🎜을 배우는 데 관심이 있다면 해당 지시문이 무엇인지, 용도는 무엇인지, 프로젝트에서 어떻게 사용하는지 읽어보고 배워 보세요. [관련 튜토리얼 추천: "🎜angular 튜토리얼🎜"]🎜

🎜무엇을 배울 것인가🎜

🎜이 글에서는 Angular 에 대해 배울 것입니다. code> 구조적 교수 패턴의 지식 포인트. 당신은 그것이 무엇인지, 어떻게 사용하는지 알게 될 것입니다. 🎜🎜이 기사를 공부한 후에는 이러한 지침을 더 잘 이해하고 실제 프로젝트에서 사용할 수 있습니다. 🎜<h3 data-id="heading-1">🎜Angular 구조 지시문이란 무엇인가요? 🎜</h3>🎜<code>Angular 구조 지시어는 DOM의 구조를 변경할 수 있는 지시어입니다. 이러한 지시문은 요소를 추가, 제거 또는 교체합니다. 구조적 지시문은 이름 앞에 * 기호가 있습니다. 🎜🎜Angular에는 세 가지 표준 구조 지시문이 있습니다. 🎜

• *ngIf - 표현식에서 반환된 부울 값을 기반으로 조건부로 템플릿(예: 조건부 렌더링 템플릿)을 포함합니다.
• *ngFor - 배열 탐색
• *ngSwitch - 일치하는 각 이미지 렌더링

🎜다음은 구조화된 지시문의 예입니다. 구문은 다음과 같습니다. 🎜rrreee🎜조건문은 true 또는 false여야 합니다. 🎜rrreee🎜Angular는 <ng-template> 요소를 생성한 다음 *ngIf 지시문을 적용합니다. 이는 [ngIf]와 같이 대괄호 [] 안의 속성 바인딩으로 변환됩니다. 클래스 이름을 포함한 <div>의 나머지 부분은 <ng-template>에 삽입됩니다. 예: 🎜rrreee

🎜Angular 구조 지시어는 어떻게 작동하나요? 🎜

🎜구조적 지시어를 사용하려면 HTML 템플릿에 지시어가 포함된 요소를 추가해야 합니다. 그런 다음 지시문에 설정한 조건이나 표현식을 기반으로 요소를 추가, 삭제 또는 교체합니다. 🎜

🎜구조 지시문의 예🎜

🎜간단한 HTML 코드를 추가합니다. 🎜🎜app.comComponent.html 파일 내용은 다음과 같습니다. 🎜rrreee

🎜*ngIf사용 방법 > command🎜

🎜*ngIf를 사용하여 조건에 따라 요소를 표시할지 제거할지 결정합니다. ngIf는 if-else와 매우 유사합니다. 🎜🎜식이 false인 경우 *ngIf 지시문은 HTML 요소를 제거합니다. true인 경우 요소의 복사본이 DOM에 추가됩니다. 🎜🎜전체 *ngIf 코드는 다음과 같습니다. 🎜rrreee

🎜*ngFor 명령 사용 방법🎜 h4>🎜us 배열을 반복하려면 *ngFor 지시어를 사용하세요. 예: 🎜rrreee🎜구성 요소 TypeScript 파일: 🎜rrreee

🎜*ngSwitch 지시어 사용 방법🎜 h4>

🎜번역기 추가됨: 이 명령은 실제 ​​개발에 매우 ​​유용합니다🎜

🎜우리는 ngSwitch를 사용하여 다양한 조건문에 따라 렌더링할 요소를 결정합니다. *ngSwitch 지시문은 우리가 사용하는 switch 문과 매우 유사합니다. 예: 🎜rrreee🎜In typescript: 🎜rrreee🎜모듈의 조건을 충족하는 특정 요소를 렌더링하는 데 사용되는 기본값을 가진 MyShopping 변수가 있습니다. . 🎜🎜조건 값이 true이면 관련 요소가 DOM으로 렌더링되고 나머지 요소는 무시됩니다. 일치하는 요소가 없으면 *ngSwitchDefault 요소가 DOM으로 렌더링됩니다. 🎜

🎜Angular에서 구조적 지시어는 언제 사용해야 하나요? 🎜

🎜DOM에서 요소를 추가하거나 제거하려면 구조 지시문을 사용해야 합니다. 물론 이를 사용하여 요소의 CSS 스타일을 변경하거나 이벤트 리스너를 추가할 수도 있습니다. 이를 사용하여 이전에 존재하지 않았던 새로운 요소를 만들 수도 있습니다. 🎜🎜가장 좋은 규칙은 다음과 같습니다. 🎜DOM 조작을 고려할 때는 구조적 지시어를 사용해야 합니다🎜. 🎜

요약

구조적 지시문은 Angular의 매우 중요한 부분이며 다양한 방법으로 사용할 수 있습니다.

이 기사를 통해 독자들이 이러한 지침을 사용하는 방법과 이러한 모드를 언제 사용하는지 더 잘 이해할 수 있기를 바랍니다.

이 글은 무료 번역 형식의 번역입니다.

원본 주소: https://www.freecodecamp.org/news/angular-structural-directive-patterns-what-they-are-and-how-to-use-them/

더 많은 프로그래밍 관련 지식, 방문하세요: 프로그래밍 비디오! !