การวิเคราะห์โดยย่อเกี่ยวกับส่วนประกอบอิสระใน Angular และดูวิธีใช้งาน

หนึ่งในคุณสมบัติที่น่าตื่นเต้นของ Angular 14 ก็คือในที่สุดส่วนประกอบแบบสแตนด์อโลนของ Angular ก็มาถึงแล้ว

ใน Angular 14 นักพัฒนาสามารถลองใช้ส่วนประกอบอิสระเพื่อพัฒนาส่วนประกอบต่างๆ ได้ แต่เป็นที่น่าสังเกตว่า API ของส่วนประกอบอิสระของ Angular ยังคงไม่เสถียร และอาจมีการอัปเดตแบบทำลายล้างในอนาคต ดังนั้นจึงไม่แนะนำสำหรับ ใช้ในสภาพแวดล้อมการผลิต [คำแนะนำการสอนที่เกี่ยวข้อง: "บทช่วยสอนเชิงมุม"]

วิธีสร้างส่วนประกอบอิสระ

สำหรับส่วนประกอบที่มีอยู่ เราสามารถเพิ่ม แบบสแตนด์อโลน: true ไปที่ @Component() จากนั้นเราสามารถใช้ imports โดยตรงโดยไม่ต้อง @NgModule() นำเข้าโมดูลอื่น ๆ . หากคุณกำลังสร้างส่วนประกอบใหม่ คุณสามารถใช้คำสั่ง ng generate component <name> --standalone เพื่อสร้างส่วนประกอบอิสระโดยตรง ตัวอย่างเช่น:

ng สร้างส่วนประกอบปุ่มรายการ --standalone

@Component({
  ตัวเลือก: 'รายการปุ่มแอป',  
  แบบสแตนด์อโลน: จริง,  
  นำเข้า: [
    โมดูลทั่วไป,
  -  
  templateUrl: './button-list.component.html',  
  styleUrls: ['./button-list.component.scss']
-
คลาสส่งออก ButtonListComponent ใช้ OnInit

นำเข้าโมดูลที่มีอยู่ในส่วนประกอบอิสระ

เราสามารถเพิ่มโมดูลที่มีอยู่ใน imports โดยใช้ MatButtonModule เป็นตัวอย่าง:

imports: [
    โมดูลทั่วไป,
    โมดูล MatButton,
]

เพื่อให้เราสามารถใช้ส่วนประกอบ mat-button ของ MatButtonModule ใน ButtonListComponent :

<button mat-button>Basic</button>
<button mat-button color="primary">หลัก</button>
<button mat-button color="accent">สำเนียง</button>
<button mat-button color="warn">เตือน</button>
<ปุ่ม Mat-ปุ่มปิดการใช้งาน>ปิดการใช้งาน</ปุ่ม>
<a mat-button href="https://damingerdai.github.io" target="_blank">ลิงก์</a>

การแสดงผล:

ในการเริ่มต้นแอปพลิเคชันเชิงมุมโดยใช้ส่วนประกอบอิสระ

คือการตั้งค่า AppComponent เป็นส่วนประกอบอิสระ:

@Component({
  ตัวเลือก: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.scss'],  
  แบบสแตนด์อโลน: จริง,
-
คลาสส่งออก AppComponent {

ขั้นตอนที่สองคือการเพิ่มโมดูลที่นำเข้าในการนำเข้าของ AppModule ไปยังการนำเข้าของ AppComponent แต่มีข้อยกเว้นสองโมดูล: BrowserModule และ BrowserAnimationsModule

หากนำเข้าอาจทำให้เกิดปัญหา: ** BrowserModule ได้รับการโหลดแล้ว หากคุณต้องการเข้าถึงคำสั่งทั่วไป เช่น NgIf และ NgFor ให้นำเข้า CommonModule แทน**:

ขั้นตอนที่สามคือการลบไฟล์ app.module.ts

ขั้นตอนสุดท้ายคือการนำเข้าใน main.ts :

import { platformBrowserDynamic } จาก '@เชิงมุม/แพลตฟอร์ม-browser-dynamic';
แพลตฟอร์มBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

เปลี่ยนเป็น:

bootstrapApplication(AppComponent).catch(err => console.error(err));

ด้วยวิธีนี้ เราสามารถใช้ส่วนประกอบอิสระเพื่อเริ่มส่วนประกอบเชิงมุม

กำหนดค่าการกำหนดเส้นทางสำหรับส่วนประกอบอิสระ

ฉันมีส่วนประกอบอิสระสามส่วนที่นี่: HomeComponent , ButtonListComponent และ ChipListComponent

จากนั้นสร้างวัตถุ ROUTES const ROUTES ใน main.ts

: Route[] = [
  -
      เส้นทาง: '',    
      pathMatch: 'เต็ม'    
      เปลี่ยนเส้นทางไปที่: 'บ้าน'
  -
  -
      เส้นทาง: 'บ้าน'    
      ส่วนประกอบ:HomeComponent
  -
  -
      เส้นทาง: 'ปุ่ม'    
      โหลดส่วนประกอบ: () =>
            นำเข้า('./app/button-list/button-list.component').แล้ว(
                    (mod) => mod.ButtonListComponent
            -
  -
  -
      เส้นทาง: 'ชิป'    
      โหลดส่วนประกอบ: () =>  
          นำเข้า('./app/chip-list/chip-list.component').แล้ว(
                  (mod) => mod.ChipListComponent
          -
  -
];

ButtonListComponent และ ChipListComponent ใช้ loadComponent เพื่อใช้การโหลดเส้นทางแบบ Lazy Loading

จากนั้นใช้ providers เพื่อลงทะเบียน RouterModule ในพารามิเตอร์ตัวที่สองของ bootstrapApplication

bootstrapApplication (ส่วนประกอบของแอป {
  ผู้ให้บริการ: [
    importProvidersFrom(RouterModule.forRoot([...เส้นทาง]))
  -

=

> console.error(err));

การตั้งค่าการพึ่งพาการฉีด

เมื่อเราต้องการเริ่มแอปพลิเคชันเชิงมุม เราอาจจำเป็นต้องฉีดค่าหรือบริการบางอย่าง ใน bootstrapApplication เราสามารถลงทะเบียนค่าหรือบริการผ่าน providers

ตัวอย่างเช่น ฉันมี url เพื่อรับรูปภาพ ซึ่งจำเป็นต้องแทรกลงใน PhotoService :

bootstrapApplication(AppComponent, {
  ผู้ให้บริการ: [
    -
          ให้: 'photoUrl',      
          useValue: 'https://picsum.photos',
    -
    {ให้: PhotosService, useClass: PhotosService },
    importProvidersFrom(RouterModule.forRoot([...เส้นทาง]))
    importProvidersFrom (HttpClientModule)
  -
})

รหัส PhotoService เป็นดังนี้:

@Injectable()export class PhotosService {
  ตัวสร้าง (
    @Inject('photoUrl') photoUrl ส่วนตัว: สตริง
    http ส่วนตัว: HttpClient ) { }

  สาธารณะ getPhotoUrl (i: หมายเลข): ​​สตริง {
      กลับ `${this.photoUrl}/200/300?random=${i}`;
  -
}

ซอร์สโค้ด ซอร์สโค้ด

ที่ใช้ในบทความนี้: https://github.com/damingerdai/angular-standalone-components-app

การสาธิตออนไลน์: https://damingerdai.github.io/angular-standalone-components-app/Original

text ที่อยู่: https://juejin.cn/post/7107224235914821662