浅析 Angular4 组件

Posted 2021-04-26 点融黑帮

一. 介绍

随着 Angular4 的正式发布，笔者重新关注并研究了Angular。它是一个非常强大的框架内置了相当多的功能。以AngularJs 为基础，使用Tyescript 重写。与 AngularJs 相比，它没有了 scope和controllers 的概念；相反，它采用组件层次结构化作为其主要架构概念。支持动态加载，改进了依赖注入，并提供更为简单的路由和异步模块编译机制。

从下图中可以看出组件（component）是 angular4 最强大的功能之一。组件可以扩展html 元素，封装可重用的代码。在较高层面上，组件是自定义元素。

Angular架构图（图片来源：Angular官网）

二．创建和使用组件

技术上来讲，一个组件就是一个控制模板试图的类。以实现一个process为例，可以通过如下命令行来一键创建组件

模板文件：

TS 文件：

1）在同一个module中使用创建的组件

我们可以以下列方式使用组件：