angular模板组件Component的创建及使用例子

创建模板:listcomponent

ng g c listcomponent -is


App.Component.html中使用listcomponent模板

选中listcomponent文件夹下的listcomponent.component.ts文件,查看@Component中selector:的值

@Component({
    selector: 'app-listcomponent',
    templateUrl: './listcomponent.component.html',
    styles: []
})


当前selector名称就是app-listcomponent

在需要使用listcomponent模板的位置插入

<app-listcomponent></app-listcomponent>

标签就可以直接使用listcomponent模板信息了

例如:

blob.png


由于我们是ng g c listcomponent 创建的模板,创建过程中系统自动在app.module.ts中 import了模板内容,所以可以直接引用,如果自己手动创建的话 需要在app.module.ts中引用下模板

blob.png



转载请说明出处:原文链接 http://www.nbsite.cn/qdjs/52

相关阅读:

Visual Studio Code(VSCODE)语言设置简体中文

记录下angular-cli安装及重新安装过程中遇到的错误及解决方案

Angular错误:Unexpected end of Input at 1:2308

angular新建项目、启动本地服务器、创建组件及服务等实用语句整理