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:`
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。