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

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

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

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

독립 컴포넌트 생성 방법

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

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组件了：

<button mat-button>Basic</button>
<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Warn</button>
<button mat-button disabled>Disabled</button>
<a mat-button href="https://damingerdai.github.io" target="_blank">Link</a>

效果图：

使用独立组件启动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。

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

第三步，删除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}`;
  }
}

rrreee

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

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

rrreee

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

rrreee

Rendering:

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

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

두 번째 단계는 AppModule가져오기에서 가져온 모듈을 설정하는 것입니다. > AppComponent 가져오기에 추가되었지만 BrowserModule 및 BrowserAnimationsModule이라는 두 가지 모듈 예외가 있습니다. 🎜🎜가져오면 ** BrowserModule이 이미 로드되었을 수 있습니다. NgIf 및 NgFor와 같은 일반 지시문에 액세스해야 하는 경우 대신 CommonModule을 가져오세요.* * 질문: 🎜🎜🎜 🎜세 번째 단계에서는 app.module.ts 파일을 삭제합니다. 🎜🎜마지막 단계에서는 main.ts의 🎜rrreee🎜를 다음과 같이 🎜rrreee🎜로 변경합니다. 이제 Angular 구성 요소를 시작하기 위해 독립 구성 요소의 사용을 구현했습니다. 🎜

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

🎜종속성 주입 구성🎜🎜🎜Angular 애플리케이션을 시작하려면 일부 값이나 서비스를 주입해야 할 수도 있습니다. bootstrapApplication에서는 공급자를 통해 값이나 서비스를 등록할 수 있습니다. 🎜🎜예를 들어, PhotoService에 삽입해야 하는 사진을 가져오는 URL이 있습니다. 🎜rrreee🎜PhotoService 코드는 다음과 같습니다. 🎜rrreee🎜🎜Source code🎜🎜🎜이 문서에는 사용된 소스 코드가 포함되어 있습니다: https://github.com/damingerdai/angular-standalone-comComponents-app🎜🎜온라인 데모: https://damingerdai.github.io/angular-standalone-comComponents-app /🎜🎜🎜원문 주소: https://juejin.cn/post/7107224235914821662🎜🎜🎜더 많은 프로그래밍 관련 지식을 보시려면 🎜프로그래밍 영상🎜을 방문해 주세요! ! 🎜

위 내용은 Angular의 독립 구성요소에 대한 간략한 분석 및 사용 방법 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!