Angular基础(二) 组件的使用

​

一、简单操作

a) 使用Angular CLI可以快速创建项目框架，先运行 $ npm install –g @angular/cli@1.0.0安装CLI，为CLI的位置设置环境变量，然后就可以全局使用ng命令了。

执行ng new –ng4 angular-hello-world可以创建Angular4项目，会自动生成基础的文件夹和文件，还会自动进行npm i操作，下载并安装所需的依赖。

然后执行ng serve就可以编译并启动这个程序了，但ng并不会自动打开浏览器。

b) 创建一个组件

组件是Angular的核心，运行ng generate componenthello-world可以生成hello-world组件，如果VSCode安装了Angular Files插件，也通过可以方便地右键-添加组件，会为一个组件自动创建四个文件。

组件的基本组成部分为装饰器(Component Decorator)和组件定义类(ComponentDefinition class)。

上图右侧的hello-world.component.ts文件中，import引入两个依赖Component和OnInit；@Component部分便是装饰器了，这部分代码将HelloWorld类装饰成了一个组件。因为selector属性的值为“app-hello-world”，标签就可以在html中使用了。templateUrl定义了模板的路径，还可使用template并使用倒引号（`…`）直接在ts文件中嵌入模板内容；styleUrl指定当前组件专属的CSS文件路径。

如此，一个组件就创建好了，在app.component.html中加入标签就可以使用这个组件了。

c) 在组件中使用数据。

用插件的功能添加一个user-item组件，会自动创建所有的文件，并已将组件添加到了app.component.html。

在组件的ts文件添加name属性并在构造函数初始化

随后在模板中使用这个属性，语法为{{name}}。

d) 数组的使用。

数组的遍历使用*ngFor，这与razor中的遍历类似，会自动创建包含数组成员的标签。在ts文件中定义字符串数组，可以用string[]或Array的写法。然后*ngFor的使用方式为：

试了下把let换成var就不行了，let声明的变量作用域被限制在了块级，比var安全，可能这儿的模板语法废弃了var吧。

e) 组件的使用

前面创建的user-item组件中的name属性只是使用了默认的值‘Felipe’。实际使用中，组件是可复用的，属性的值应该从外部指定。

要在user-list组件中使用user-item，可以这样修改user-list的模板：

[name]=***这样的写法是在向user-item组件传递值。

修改后的user.item.components.ts如下，导入了Input，并在属性前面加上@Input()，这样就可以从父模板传入值了。

二、Angular的启动过程

a) 每个程序都有启动入口，在执行ng serve后，ng会在.angular-cli.json中查找入口，.angular-cli.json指向main.ts文件，而main.ts便是程序的入口。在main.ts中platformBrowserDynamic().bootstrapModule(AppModule)语句表示启动程序会执行AppModule，AppModule在app.module.ts中定义。

b) app.module.ts中的具体内容有：

@NgModule装饰器包含四个属性:declarations、imports、providers和bootstrap。

declaration属性声明了当前AppModule模块包含的组件，创建的新组件会自动添加到这里。

imports属性导入了AppModule依赖的模块。关于imports与头部的import的区别作者后面会细说。

prividers属性用于进行依赖注入，现在不懂了。

bootstrap属性指定了运行该模块时，加载的第一个组件。

学习资料：The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda