Angular의 독립 구성 요소에 대한 간략한 분석 및 사용 방법 알아보기

Angular 14의 흥미로운 기능 중 하나는 Angular의 독립형 구성 요소가 마침내 출시되었다는 것입니다.

Angular 14에서는 개발자가 독립 구성 요소를 사용하여 다양한 구성 요소를 개발하려고 시도할 수 있지만 Angular 독립 구성 요소의 API는 아직 안정적이지 않으며 향후 일부 파괴적인 업데이트가 있을 수 있으므로 권장되지 않습니다. 프로덕션 환경에서 사용하세요. [관련 튜토리얼 추천: "angular 튜토리얼"]

독립 컴포넌트를 생성하는 방법

기존 컴포넌트의 경우 @Component() 에 Standalone: ​​​​true 를 추가한 다음 @NgModule() 없이 직접 imports 사용할 수 있습니다. . 새 구성 요소를 생성하는 경우 ng generate component <name> --standalone 명령을 사용하여 독립 구성 요소를 직접 생성할 수 있습니다. 예:

ng generate 구성 요소 버튼-목록 --standalone

@Component({
  선택기: '앱 버튼 목록',  
  독립형: 사실,  
  수입: [
    공통모듈,
  ],  
  templateUrl: './button-list.comComponent.html',  
  styleUrls: ['./button-list.comComponent.scss']
})
내보내기 클래스 ButtonListComponent는 OnInit를 구현하여

독립 구성 요소에 기존 모듈을 가져옵니다.

MatButtonModule 예로 들어 imports 에 기존 모듈을 추가할 수 있습니다

.
    공통모듈,
    매트버튼모듈,
],

그러면 ButtonListComponent 에서 MatButtonModule 의 mat-button 구성 요소를 사용할 수 있습니다:

<button mat-button>Basic</button>
<button mat-button color="primary">기본</button>
<button mat-button color="accent">악센트</button>
<button mat-button color="warn">경고</button>
<button mat-button 비활성화>비활성화</button>
<a mat-button href="https://damingerdai.github.io" target="_blank">링크</a>

렌더링:

독립 구성 요소를 사용하여 Angular 애플리케이션을 시작하는

AppComponent 독립 구성 요소로 설정하는 것입니다.

@Component({
  선택기: 'app-root',  
  templateUrl: './app.comComponent.html',  
  styleUrls: ['./app.comComponent.scss'],  
  독립형: 사실,
})
import class AppComponent {

두 번째 단계는 AppModule 의 가져오기에 가져온 모듈을 AppComponent 의 가져오기에 추가하는 것입니다. 그러나 두 가지 모듈 예외( BrowserModule 및 BrowserAnimationsModule 가 있습니다.

가져오면 문제가 발생할 수 있습니다. ** BrowserModule 이미 로드되어 있습니다. NgIf 및 NgFor와 같은 일반 지시문에 액세스해야 하는 경우 대신 CommonModule 을 가져오십시오.**:

세 번째 단계는 app.module.ts 파일을 삭제하는 것입니다.

마지막 단계는 main.ts 에서 가져오는 것입니다.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

다음으로 변경되었습니다:

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

이러한 방식으로 독립 구성 요소를 사용하여 Angular 구성 요소를 시작할 수 있습니다.

독립 구성 요소에 대한 라우팅을 구성합니다.

여기에는 HomeComponent , ButtonListComponent 및 ChipListComponent 라는 세 가지 독립 구성 요소가 있고

main.ts 에서 ROUTES 개체 const ROUTES를 만듭니다

. Route[] = [
  {
      길: '',    
      pathMatch: '전체',    
      리디렉션 대상: '집'
  },
  {
      경로: '집',    
      구성요소:홈구성요소
  },
  {
      경로: '버튼',    
      로드컴포넌트: () =>
            import('./app/button-list/button-list.comComponent').then(
                    (mod) => mod.ButtonListComponent
            ),
  },
  {
      경로: '칩',    
      로드컴포넌트: () =>  
          import('./app/chip-list/chip-list.comComponent').then(
                  (mod) => mod.ChipListComponent
          ),
  },
];

그 중 ButtonListComponent 와 ChipListComponent loadComponent 사용하여 경로의 지연 로딩을 구현합니다.

그런 다음 providers 사용하여 bootstrapApplication 의 두 번째 매개 변수에 RouterModule 등록합니다.

bootstrapApplication(AppComponent, {
  제공업체: [
    importProvidersFrom(RouterModule.forRoot([...ROUTES])),
  ],
}).catch(err => console.error(err));

렌더링:

종속성 주입 구성

Angular 애플리케이션을 시작하려면 일부 값이나 서비스를 주입해야 할 수도 있습니다. bootstrapApplication 에서는 providers 통해 값이나 서비스를 등록할 수 있습니다.

예를 들어, PhotoService 에 삽입해야 하는 사진을 가져오는 URL이 있습니다.

bootstrapApplication(AppComponent, {
  제공업체: [
    {
          제공: 'photoUrl',      
          useValue: 'https://picsum.photos',
    },
    {제공: PhotosService, useClass: PhotosService },
    importProvidersFrom(RouterModule.forRoot([...ROUTES])),
    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-comComponents-app

온라인 데모: https://damingerdai.github.io/angular-standalone-comComponents-app/Original

text 주소: https://juejin.cn/post/7107224235914821662