2021-04-16

最新推荐文章于 2021-11-04 16:53:51 发布

原创最新推荐文章于 2021-11-04 16:53:51 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular

Angular开发方法总结

模块
简介

Angular是模块化的，NgModule是构成应用的主要功能。NgModule可以看做是一个容器，在里面是专注于某项功能的html、样式及ts代码。如果NgModule之间想要互相调用，则需要在NgModule的配置项中导入或导出某个模块，这样NgModule将产生层次，以创建应用的app.module.ts的AppModule为根模块的树状模块依赖关系。

使用

NgModule的声明是以装饰器的方法实现的，因此需要在文件中使用@NgModule()装饰器声明这是一个模块定义文件，@NgModule是一个函数，里面接受以下参数：

*declarations（可声明对象表） —— 那些属于本 NgModule 的组件、指令、管道。
*exports（导出表） —— 那些能在其它模块的组件模板中使用的可声明对象的子集。
*imports（导入表） —— 那些导出了本模块中的组件模板所需的类的其它模块。
providers —— 本模块贡献的那些服务的创建器。这些服务能被本模块中的任何部分使用。
bootstrap —— 应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。
官方模块
BrowserModule：@angular/platform-browser引入，当你想要在浏览器中运行应用时
CommonModule：@angular/common引入，当你想要使用 NgIf 和 NgFor 时
FormsModule：@angular/forms引入，当要构建模板驱动表单时（它包含 NgModel ）
ReactiveFormsModule：@angular/forms引入，当要构建响应式表单时
RouterModule：@angular/router引入，要使用路由功能，并且你要用到 RouterLink,.forRoot() 和 .forChild() 时
HttpClientModule：@angular/common/http引入，当你要和服务器对话时

推荐使用第一种方法声明服务，因为Angular可以通过shake tree对服务进行优化。

forRoot()模式

RouterModule 中提供了 Router 服务，同时还有一些路由指令，比如 RouterOutlet 和 routerLink 等。应用的根模块导入了 RouterModule，以便应用中有一个 Router 服务，并且让应用的根组件可以访问各个路由器指令。任何一个特性模块也必须导入 RouterModule，这样它们的组件模板中才能使用这些路由器指令。

如果 RouterModule 没有 forRoot()，那么每个特性模块都会实例化一个新的 Router 实例，而这会破坏应用的正常逻辑，因为应用中只能有一个 Router 实例。通过使用 forRoot() 方法，应用的根模块中会导入 RouterModule.forRoot(...)，从而获得一个 Router 实例，而所有的特性模块要导入 RouterModule.forChild(...)，它就不会实例化另外的 Router。

组件
简介

Component是组成模块的主要部分，不同组件与更深层次的模块构成了一个完整的视图。同一视图的组件及模块将会一起创建、更新、销毁。Component中要声明描述视图的模板，即html与css文件。然后视图的双向绑定及控制都是由组件来完成。

使用

Component的声明也需要用到装饰器，在文件中使用@Component装饰器声明这是一个组件定义文件，@Component中需要组件元数据的配置，配置项如下：

selector：是一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。比如，如果应用的 HTML 中包含 <app-hero-list></app-hero-list>，Angular 就会在这些标签中插入一个 HeroListComponent 实例的视图。
templateUrl：该组件的 HTML 模板文件相对于这个组件文件的地址。另外，你还可以用 template 属性的值来提供内联的 HTML 模板。这个模板定义了该组件的宿主视图。
styleUrls：该组件的样式文件相对于组件文件的地址，这是一个数组，可以引入多个样式文件。这里也可以使用style属性来提供内联的style样式。
providers：当前组件所需的服务提供者的一个数组。在这个例子中，它告诉 Angular 该如何提供一个 HeroService 实例，以获取要显示的英雄列表。
生命周期
Constructor:类的构造器，不属于Angular框架的内容，因此不应该在此方法中做任何操作，但是可以在该方法的参数中用来依赖注入。//初始化类
ngOnChanges()：当 Angular 设置或重新设置数据绑定的输入属性时响应。注意，如果你的组件没有输入，或者你使用它时没有提供任何输入，那么框架就不会调用 ngOnChanges()。// props 输入变化
ngOnInit()：在第一轮 ngOnChanges() 完成之后调用，只调用一次。在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。//created
ngDoCheck()：紧跟在每次执行变更检测时的 ngOnChanges() 和首次执行变更检测时的 ngOnInit() 后调用。检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。
ngAfterContentInit()：第一次 ngDoCheck() 之后，当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用，只调用一次。 //mounted
ngAfterContentChecked()：ngAfterContentInit() 和每次 ngDoCheck() 之后，每当 Angular 检查完被投影到组件或指令中的内容之后调用。
ngAfterViewInit():第一次 ngAfterContentChecked() 之后，当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用，只调用一次。
ngAfterViewChecked():ngAfterViewInit() 和每次 ngAfterContentChecked() 之后，每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。
ngOnDestroy():在 Angular 销毁指令或组件之前立即调用。每当 Angular 每次销毁指令/组件之前调用并清扫。在这儿取消订阅可观察对象和分离事件处理器，以防内存泄漏。

组件视图间交互
输入绑定数据

通过@Input()装饰器来声明一个变量作为输入属性，该属性应该在父组件中的子组件标签上绑定。

输出绑定方法

通过@Output()装饰器来声明一个变量作为输出属性，并使用new EventEmitter<T>()来创建一个事件发射器，在父组件的子组件标签上应该绑定一个方法。在子组件中触发事件需要用emit()方法，如果需要传递参数则直接带在括号中，然后在父组件绑定时括号中填写$event。

服务
简介

服务是一个广义的概念，它包括应用所需的任何值、函数或特性。狭义的服务是一个明确定义了用途的类。它应该做一些具体的事，并做好。理想情况下，组件的工作只管用户体验，而不用顾及其它。它应该提供用于数据绑定的属性和方法，以便作为视图（由模板渲染）和应用逻辑（通常包含一些模型的概念）的中介者。组件应该把诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作委托给各种服务。通过把各种处理任务定义到可注入的服务类中，你可以让它被任何组件使用。