素材巴巴 > 程序开发 >

Angular基础(二) 组件的使用

程序开发 2023-09-03 16:57:30


一、简单操作

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

 



标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。