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

相关阅读:

安装npm包应该放在devDependencies还是dependencies

AntDesign Of Angular之响应式栅格尺寸:nzXs、nzSm、nzMd、nzLg、nzXl、nzXXl

Angular响应式表单校验及提交主动触发所有校验

Angular 报错 Can't bind to 'formGroup' since it isn't a known property of 'form'

Angular Ionic项目build打包后发布到IIS刷新报错404解决方法