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

이 기사에서는Angular의 독립 구성 요소, Angular에서 독립 구성 요소를 만드는 방법, 기존 모듈을 독립 구성 요소로 가져오는 방법을 안내합니다. 도움이 되기를 바랍니다.

Angular 14의 흥미로운 기능은 Angular의 독립 구성 요소가 마침내 등장했다는 것입니다.

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

독립 컴포넌트 생성 방법

기존 컴포넌트의 경우@Component()中添加standalone: true的，然后我们可以在没有@NgModule()的情况下直接使用imports에서 다른 모듈을 가져올 수 있습니다. 새 구성요소를 생성하는 경우ng generate component --standalone명령을 사용하여 독립 구성요소를 직접 생성할 수 있습니다. 예:ng generate component --standalone的命令，直接创建一个独立组件, 例如：

ng generate component button-list --standalone

@Component({ selector: 'app-button-list', standalone: true, imports: [ CommonModule, ], templateUrl: './button-list.component.html', styleUrls: ['./button-list.component.scss'] }) export class ButtonListComponent implements OnInit

在独立组件中导入已有的模块

我们可以在imports中添加已有的模块，以MatButtonModule为例：

imports: [ CommonModule, MatButtonModule, ],

这样子我们就可以在ButtonListComponent中使用MatButtonModule的mat-button组件了：

Basic Primary Accent Warn Disabled Link

效果图：

使用独立组件启动Angular应用

第一步， 将AppComponent设置为独立组件：

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], standalone: true, }) export class AppComponent {

第二步，将AppModule的imports中的导入的模块加入到AppComponent的imports中,但是有两个模块例外：BrowserModule和BrowserAnimationsModule。

如果导入的话，可能会导致**BrowserModulehave already been loaded. If you need access to common directives such as NgIf and NgFor, import theCommonModuleinstead.**的问题：

第三步，删除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[] = [ { path: '', pathMatch: 'full', redirectTo: 'home' }, { path: 'home', component: HomeComponent }, { path: 'button', loadComponent: () => import('./app/button-list/button-list.component').then( (mod) => mod.ButtonListComponent ), }, { path: 'chip', loadComponent: () => import('./app/chip-list/chip-list.component').then( (mod) => mod.ChipListComponent ), }, ];

其中ButtonListComponent和ChipListComponent使用loadComponent去实现路由懒加载。

然后在bootstrapApplication的第二个参数中使用providers注册RouterModule好了。

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

效果图：

配置依赖注入

当我们想要启动Angular应用的时候，可能需要注入一些值或者服务。 在bootstrapApplication, 我们可以通过providers来注册值或者服务。

比如，我有一个获取图片的url，需要注入到PhotoService中：

bootstrapApplication(AppComponent, { providers: [ { provide: 'photoUrl', useValue: 'https://picsum.photos', }, {provide: PhotosService, useClass: PhotosService }, importProvidersFrom(RouterModule.forRoot([...ROUTES])), importProvidersFrom(HttpClientModule) ], })

PhotoService

@Injectable()export class PhotosService { constructor( @Inject('photoUrl') private photoUrl: string, private http: HttpClient ) { } public getPhotoUrl(i: number): string { return `${this.photoUrl}/200/300?random=${i}`; } }

독립 구성 요소에서 기존 모듈 가져오기

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

이런 방식으로 우리는ButtonListComponent에서MatButtonModule의mat-button구성 요소를 사용하세요:

Rendering:

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

첫 번째 단계는AppComponent를 독립 구성 요소로 설정하는 것입니다.rrreee

독립 구성 요소에 대한 라우팅 구성여기에는HomeComponent,ButtonListComponent및라는 세 가지 독립 구성 요소가 있습니다. ChipListComponent, 그런 다음ButtonListComponent및ChipListComponent가를 사용하는 main.ts에서 ROUTES 개체 rrreee를 만듭니다. >loadComponent는 경로의 지연 로딩을 구현합니다. 그런 다음providers를 사용하여bootstrapApplication의 두 번째 매개변수에RouterModule을 등록하세요. rrreee렌더링: