Angular 항목 구성 요소와 선언적 구성 요소 사례 비교

이번에는 Angular 입력 컴포넌트와 선언적 컴포넌트 사례를 비교해보겠습니다. Angular 입력 컴포넌트와 선언적 컴포넌트 사례를 사용할 때 주의 사항은 무엇입니까?

머리말

구성 요소는 Angular의 매우 중요한 부분입니다. 다음 기사에서는 Angular의 선언 구성 요소와 항목 구성 요소의 차이점을 소개합니다. 두 가지의 서로 다른 로딩 방법에 반영됩니다.

• 선언적 구성 요소는 구성 요소가 선언한 선택기를 통해 로드됩니다.

입력 구성 요소는 구성 요소 유형을 통해 동적으로 로드됩니다.

선언 구성 요소

선언 구성 요소는 템플릿에 포함됩니다. 컴포넌트에서 선언한 선택기를 통해 컴포넌트를 로드합니다.

Example

@Component({
 selector: 'a-cmp',
 template: `
 <p>这是A组件</p>
 `
})
export class AComponent {}

@Component({
 selector: 'b-cmp',
 template: `
 <p>在B组件里内嵌A组件：</p>
 <a-cmp></a-cmp>
 `
})
export class BComponent {}

BComponent 템플릿에서 selector<a-cmp></a-cmp> 문을 사용하여 AComponent를 로드합니다. selector<a-cmp></a-cmp>声明加载AComponent。

入口组件（entry component）

入口组件是通过指定的组件类加载组件。

主要分为三类：

• 在@Ng<a href="http://www.php.cn/code/8212.html" target="_blank">Module</a>.<a href="http://www.php.cn/wiki/1505.html" target="_blank">bootstrap</a>里声明的启动组件，如AppComponent。

• 在路由配置里引用的组件

• 其他通过编程使用组件类型加载的动态组件

启动组件

app.component.ts

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

app.module.ts

@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 BrowserAnimationsModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

在bootstrap里声明的AppComponent为启动组件。虽然我们会在index.html里使用组件的selector<app-root></app-root>的位置，但是Angular并不是根据此selector来加载AppComponent。这是容易让人误解的地方。因为index.html不属于任何组件模板，Angular需要通过编程使用bootstrap里声明的AppComponent类型加载组件，而不是使用selector。

由于Angular动态加载AppComponent，所有AppComponent是一个入口组件。

路由配置引用的组件

@Component({
 selector: 'app-nav',
 template: `
 <nav>
 <a routerLink="/home" routerLinkActive #rla="routerLinkActive" selected="#rla.isActive">首页</a>
 <a routerLink="/users" routerLinkActive #rla="routerLinkActive" selected="#rla.isActive">用户</a>
 </nav>
 <router-outlet></router-outlet>
 `
})
export class NavComponent {}

我们需要配置一个路由

const routes: Routes = [
 {
 path: "home",
 component: HomeComponent
 },
 {
 path: "user",
 component: UserComponent
 }
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Angular根据配置的路由，根据路由指定的组件类来加载组件，而不是通过组件的selector加载。

配置入口组件

在Angular里，对于入库组件需要在@NgModule.entryComponents里配置。

由于启动组件和路由配置里引用的组件都为入口组件，Angular会在编译时自动把这两种组件添加到@NgModule.entryComponents里。对于我们自己编写的动态组件需要手动添加到@NgModule.entryComponents

Entry 컴포넌트(엔트리 컴포넌트)

엔트리 컴포넌트는 지정된 컴포넌트 클래스를 통해 컴포넌트를 로드합니다.
은 주로 @Ng<a href="http://www.php.cn/code/8212.html" target="_blank">Module</a>

의

세 가지 범주로 나뉩니다.bootstrap

에 선언된 시작 구성 요소. 🎜🎜🎜🎜 라우팅 🎜 구성 참조하는 구성 요소 🎜🎜🎜🎜🎜구성 요소 유형 🎜🎜🎜🎜Startup 구성 요소🎜🎜app.comComponent.ts🎜

@NgModule({ declarations: [  AppComponent ], imports: [  BrowserModule,  BrowserAnimationsModule,  AppRoutingModule ], providers: [], entryComponents:[DialogComponent], declarations:[] bootstrap: [AppComponent] }) export class AppModule { }

🎜app.module .ts를 사용하여 프로그래밍 방식으로 로드된 기타 동적 구성 요소 🎜rrreee🎜부트스트랩에 선언된 AppComponent는 시작 구성 요소입니다. index.html에서 구성 요소의 selector<app-root></app-root> 위치를 사용하지만 Angular는 이 선택기를 기반으로 AppComponent를 로드하지 않습니다. 여기서 오해를 받기 쉽습니다. index.html은 어떤 구성 요소 템플릿에도 속하지 않기 때문에 Angular는 선택기를 사용하는 대신 부트스트랩에 선언된 AppComponent 유형을 사용하여 프로그래밍 방식으로 구성 요소를 로드해야 합니다. 🎜🎜Angular는 AppComponent를 동적으로 로드하므로 모든 AppComponent는 진입 구성 요소입니다. 🎜🎜🎜경로 구성에서 참조하는 구성 요소🎜🎜rrreee🎜경로를 구성해야 합니다🎜rrreee🎜Angular는 구성 요소의 선택기를 통해 로드하는 대신 구성된 경로와 경로에 지정된 구성 요소 클래스에 따라 구성 요소를 로드합니다. 🎜🎜🎜🎜항목 구성 요소 구성🎜🎜🎜🎜Angular에서는 항목 구성 요소를 @NgModule.entryComponents에서 구성해야 합니다. 🎜🎜시작 구성 요소와 라우팅 구성에서 참조되는 구성 요소는 모두 항목 구성 요소이므로 Angular는 컴파일 중에 이 두 구성 요소를 @NgModule.entryComponents에 자동으로 추가합니다. 직접 작성한 동적 구성 요소의 경우 @NgModule.entryComponents에 수동으로 추가해야 합니다. 🎜rrreee🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜JS에서 더블 클릭과 클릭 이벤트 간의 충돌을 처리하는 방법🎜🎜🎜🎜🎜vue를 사용하여 사용자 정의 구성 요소를 작성하는 방법🎜🎜🎜

위 내용은 Angular 항목 구성 요소와 선언적 구성 요소 사례 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!