Apakah arahan struktur dalam Angular? Bagaimana untuk menggunakan

Artikel ini akan membawa anda melalui mod arahan struktur dalam Angular dan memperkenalkan arahan struktur dan cara menggunakannya saya harap ia akan membantu anda!

Dalam Angular, terdapat dua jenis arahan. Arahan atribut mengubah suai rupa atau gelagat elemen DOM. Arahan struktur tambah atau alih keluar DOM elemen.

Arahan struktur ialah salah satu ciri paling berkuasa dalam Angular, namun ia sering disalahertikan.

Jika anda berminat untuk mempelajari tentang arahan struktur, maka mari baca dan ketahui apa itu, untuk kegunaannya dan cara menggunakannya dalam projek anda. [Cadangan tutorial berkaitan: "tutorial sudut"]

Apa yang anda akan pelajari

Dalam artikel ini, anda akan belajar tentangAngular Pengetahuan titik corak arahan struktur. Anda akan tahu apa itu dan cara menggunakannya.

Selepas mempelajari artikel ini, anda akan lebih memahami arahan ini dan menggunakannya dalam projek sebenar.

Apakah arahan struktur sudut?

Angular arahan struktur ialah arahan yang boleh mengubah struktur DOM. Perintah ini boleh menjadi 添加、移除或者替换元素. Arahan struktur mempunyai simbol * sebelum namanya.

Dalam Angular, terdapat tiga arahan berstruktur standard.

• *ngIf - Sertakan templat secara bersyarat (iaitu templat pemaparan bersyarat) berdasarkan nilai Boolean yang dikembalikan oleh ungkapan
• *ngFor - Traverse tatasusunan
• *ngSwitch - Memaparkan setiap imej yang sepadan

Di bawah ialah contoh arahan berstruktur. Sintaksnya kelihatan seperti ini:

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

Pernyataan bersyarat mestilah true atau false.

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

Angular menjana elemen <ng-template> dan kemudian menggunakan arahan *ngIf. Ini menukarnya kepada sifat yang mengikat dalam kurungan segi empat sama [], seperti [ngIf]. Selebihnya <div>, termasuk nama kelas, dimasukkan ke dalam <ng-template>. Contohnya:

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

Bagaimanakah arahan struktur sudut berfungsi?

Untuk menggunakan arahan struktur, kita perlu menambah elemen dengan arahan dalam templat HTML. Kemudian tambah, padam atau gantikan elemen berdasarkan syarat atau ungkapan yang kami tetapkan dalam arahan.

Contoh arahan struktur

Mari tambahkan beberapa kod HTML mudah.

app.component.html Kandungan fail adalah seperti berikut:

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

Cara menggunakan arahan *ngIf

Kami menggunakan *ngIf mengikut syarat untuk menentukan Paparkan atau alih keluar elemen. ngIf sangat serupa dengan if-else.

Apabila ungkapan false, arahan *ngIf mengalih keluar elemen HTML. Apabila true, salinan elemen ditambahkan pada DOM.

Kod *ngIf lengkap adalah seperti berikut:

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

Cara menggunakan arahan *ngFor

Kami menggunakan *ngFor arahan untuk melintasi tatasusunan. Contohnya:

<ul>

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

</ul>

Komponen kamiTypeScript fail:

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 {
  }

}

Cara menggunakan perintah *ngSwitch

Terjemahan Ditambah oleh editor: Perintah ini sangat berguna dalam pembangunan sebenar

Kami menggunakan ngSwitch untuk memutuskan elemen yang hendak dipaparkan berdasarkan pernyataan bersyarat yang berbeza. Arahan *ngSwitch sama seperti pernyataan switch yang kami gunakan. Contohnya:

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

Dalam typescript:

Myshopping: string = '';

Kami mempunyai pembolehubah MyShopping, yang mempunyai nilai lalai dan digunakan untuk menghasilkan keadaan tertentu yang memenuhi keadaan dalam elemen modul.

Apabila nilai syarat ialah true, elemen yang berkaitan akan diberikan kepada DOM dan elemen yang selebihnya akan diabaikan. Jika tiada unsur yang sepadan, unsur *ngSwitchDefault dipaparkan kepada DOM.

Bilakah kita perlu menggunakan arahan struktur dalam Angular?

Jika anda ingin menambah atau mengalih keluar elemen dalam DOM, anda harus menggunakan arahan struktur. Sudah tentu, kita juga boleh menggunakannya untuk menukar gaya elemen CSS atau menambah pendengar acara. Anda juga boleh menggunakannya untuk mencipta elemen baharu yang tidak wujud sebelum ini.

Peraturan terbaik ialah: Apabila kita berfikir tentang memanipulasi DOM, maka sudah tiba masanya untuk menggunakan arahan struktur.

Ringkasan

Arahan struktur ialah bahagian penting Angular dan kita boleh menggunakannya dalam pelbagai cara.

Saya berharap melalui artikel ini, pembaca dapat lebih memahami cara menggunakan arahan ini dan masa untuk menggunakan mod ini.

Artikel ini adalah terjemahan, dalam bentuk terjemahan percuma.

Alamat asal: https://www.freecodecamp.org/news/angular-structural-directive-patterns-what-they-are-and-how-to-use-them/

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Apakah arahan struktur dalam Angular? Bagaimana untuk menggunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!