angular ts中写html,Angular4-建立组件并载入到html中

1.在VS Code的快速建立方式Ctrl+~打开终端机

2.进到ng的数据夹底下

3.输入命令:ng g c 组件名称

在建立组件后,会自动在app.module.ts中import相关的东西

1497187314_01217.png

同时也会建立四个文件

1.组件名称.component.css:可以自定义class给ngClass套用的文件

2.组件名称.component.ts:ts的程序都写在这,准确地说应该是js的程序,不过这边是要求使用typesciprt做编译

3.组件名称.component.spec:据说是测试单元,没有玩过

4.组件名称.component.html

我刚刚建立了一个mycomponent的组件,先来看看建立了哪些文件

1497187146_41404.png

其中使用组件的名称就是app-mycomponnet

constructor是建构子,页面载入前执行

ngOnInit() 是页面载入后执行

1497187161_36934.png

复制了app-mycomponent到app.component.html中

直接贴上再按下tab,会变成这样

1497187457_00938.png

此时在载入app.componen组件时,会在html中再把刚刚自行建立的组件“app-mycomponent”载入进来

LINE讨论群、FB讨论区

欢迎您的加入,让这个社群更加美好!

联络方式:

FaceBook

E-Mail

标签:app,component,载入,Angular4,html,名称,组件

来源: https://www.cnblogs.com/chinatrump/p/11458180.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值