독립형 구성 요소에 대한 각도 학습 설명(Standalone Component)

이 글은 여러분이 계속해서 Angle을 학습하고 Angular의 독립형 컴포넌트(Standalone Component)를 간략하게 이해하는 데 도움이 되기를 바랍니다.

Angular 14의 흥미로운 기능은 Angular의 독립 실행형 구성 요소가 마침내 출시되었다는 것입니다. [관련 튜토리얼 추천: "angular Tutorial"]

Angular 14에서는 개발자가 독립 구성 요소를 사용하여 다양한 구성 요소를 개발할 수 있지만 Angular 독립 구성 요소의 API가 여전히 안정적이지 않으며, 향후 파괴적인 업데이트가 포함될 수 있으므로 프로덕션 환경에서는 사용하지 않는 것이 좋습니다.

기본 사용법

angular.io/guide/stand…

standalone은 Angular14에서 출시한 새로운 기능입니다.

루트 모듈 AppModule을 너무 부풀리지 않게 만들 수 있습니다

모든 구성 요소/파이프/지시문은 사용 시 해당 구성 요소에 도입됩니다.

예를 들어 이전 작성 방법으로 바닥글 컴포넌트Footer 组件

然后在使用的 Module 中导入这个组件

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

@Component({
  selector: 'app-footer',
  template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `,
})
export class FooterComponent {}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooterComponent } from './footer.component';

@NgModule({
  declarations: [HomeComponent, FooterComponent],
  exports: [],
  imports: [CommonModule],
})
export class AppModuleModule {}

这种写法导致我们始终无法摆脱 NgModule

但其实我们的意图就是在 AppComponent 中使用 FooterComponent

换成 React 中的写法 其实会更便于管理和理解

用上我们的新特性 standalone

그런 다음 사용된 모듈

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

@Component({
  selector: 'app-footer',
  // 将该组件声明成独立组件
  standalone: true,
  template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `,
})
export class FooterComponent {}

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

import { FooterComponent } from '@components/footer/footer.component';

@Component({
  selector: 'app-home',
  standalone: true,
  // 声明需要使用的 component / pipe / directive 但是它们也必须都是独立组件
  imports: [FooterComponent],
  template: `<app-footer></app-footer>`,
})
export class WelcomeComponent {}

에서 이 컴포넌트를 가져옵니다. 이런 방식으로 작성하면 NgModule

을 결코 제거할 수 없다는 의미입니다. 하지만 실제로는 AppComponent에서 FooterComponent를 사용하려는 의도입니다

React에서 작성 방법을 변경하면 실제로 관리하고 이해하기가 더 쉬워집니다

사용해 보세요 독립형

Footer 구성 요소의 새로운 기능은 다음과 같이 변환됩니다. 🎜

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CustomPreloadingStrategy } from '@views/basic-syntax/router/customPreloadingStrategy';

const routes: Routes = [
  {
    path: 'home',
    // 之前想要实现懒加载 这里必须是一个NgModule 现在使用独立组件也可以 并且更加简洁
    loadComponent: () => import('@views/home/home.component').then((mod) => mod.HomeComponent),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

🎜 그러면 예를 들어 홈 페이지에서 다음과 같이 사용할 수 있습니다.🎜rrreee🎜독립 구성 요소는 지연 로딩에 직접 사용될 수 있습니다. 원래 우리는 그것을 달성하기 위해 NgModule을 사용해야 했습니다. 🎜rrreee🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 독립형 구성 요소에 대한 각도 학습 설명(Standalone Component)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!