angular4自定义组件详解
在Angular中,我们可以使用{{}}插值语法实现数据绑定。
新建组件
$nggeneratecomponentsimple-form--inline-template--inline-style #Or $nggcsimple-form-it-is#表示新建组件,该组件使用内联模板和内联样式 //会自动为simple-form生成simple-form.component.ts文件,文件中的selector为:app-simple-form,自动添加了app-前缀
输出:
installingcomponent createsrc/app/simple-form/simple-form.component.spec.ts//用于单元测试 createsrc/app/simple-form/simple-form.component.ts//新建的组件 updatesrc/app/app.module.ts//AngularCLI会自动更新app.module.ts文件。把新建的组件添加到NgModule的declarations
数组中
app.module.ts更新后:
@NgModule({ declarations:[ AppComponent, SimpleFormComponent ], ... }) exportclassAppModule{}
创建UserComponent组件
import{Component}from'@angular/core'; @Component({//Component装饰器来定义组件的元信息 selector:'sl-user', template:`大家好,我是{{name}}
我来自{{address.province}}省, {{address.city}}市
{{address|json}}
//Angular内置的json管道,来显示对象信息 `,}) //定义组件类 exportclassUserComponent{ name='name'; address={province:'province',city:'city'} } //使用构造函数初始化数据 exportclassUserComponent{ name:string; address:any; constructor(){ this.name='name'; this.address={ province:'province', city:'city' } } } //接口使用 interfaceAddress{ province:string; city:string; } exportclassUserComponent{ name:string; address:Address; constructor(){ this.name='name'; this.address={ province:'province', city:'city' } } }
定义数据接口(TypeScript中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。)
interfacePerson{ name:string; age:number; } letsemlinker:Person={ name:'semlinker', age:31 };
声明UserComponent组件
//... import{UserComponent}from'./user.component';//载入 @NgModule({ imports:[BrowserModule], declarations:[AppComponent,UserComponent],//声明 bootstrap:[AppComponent] }) exportclassAppModule{}
在AppComponent中使用UserComponent组件
import{Component}from'@angular/core'; @Component({ selector:'my-app', template:`//UserComponent的selector `, }) exportclassAppComponent{}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。