[Angular 2] Create Shareable Angular 2 Components
Angular create Components
2023-09-14 09:00:53 时间
Components that you use across multiple applications need to follow a module pattern that keeps them separate from your application logic. This will allow you to make these Angular 2 components reusable and shareable and is the same pattern followed by many libraries that you may import into your projects.
The structure likes this:
In widget-one.component.html. we use *ngIf to control the display, to do this, we have to import CommonModule from angular/common, which inlcudes NgIf, NgFor....
import { NgModule} from '@angular/core'; import { CommonModule } from '@angular/common'; import {WidgetOneComponent} from './widget-one.component'; import {WidgetTwoComponent} from './widget-two.component'; @NgModule({ imports: [CommonModule], declarations: [WidgetOneComponent, WidgetTwoComponent], exports: [WidgetOneComponent, WidgetTwoComponent, CommonModule] }) export class WidgetsModule { }
The CommonModule is available for root Module. When you create a sub module, it won't import CommonModule by default, so you need to imports it and exprots it to other sub module for free.
widget-one.component.ts:
import { Component, OnInit } from '@angular/core'; @Component({ moduleId: module.id, selector: 'widget-one', templateUrl: '<div *ngIf=selected'This is widget one </div> }) export class WidgetOneComponent implements OnInit { selected = false; constructor() { } ngOnInit() { } }
相关文章
- [Angular] Debug Angular apps in production without revealing source maps
- [Angular] Using the Argon 2 Hashing Function In Our Sign Up Backend Service
- [Angular] Two ways to create Angular Animation, using animation() or using state()
- [Angular] Create a custom pipe
- [Angular] Create a simple *ngFor
- [Angular] Using directive to create a simple Credit card validator
- [Angular + Unit] AngularJS Unit testing using Karma
- 将ANGULAR与后端请求结合
- [Angular] Understanding the Angular Component providers property
- [Angular] Create custom validators for formControl and formGroup
- [Angular] Pipes as providers
- [Angular] Create dynamic content with <tempalte>
- [Angular Directive] Create a Template Storage Service in Angular 2
- [Angular 2] Create Angular 2 Porject with Angular CLI
- [Angular 2] Create a simple search Pipe
- [D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive
- [AngularJS] Angular 1.3 ngAria - 2
- Angular SSR 应用启动时的一些保护措施
- 如何处理 Angular 单页面应用里的 a 标签,避免点击后重新加载整个应用
- Angular 如何通过 HTTP Interceptor 实现 HTTP 请求的超时监控
- 关于 Angular 应用 tsconfig.json 中的 target 属性
- 使用Angular reactive form发送HTTP请求的一个简单例子
- Angular元素属性绑定的一个例子