重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要为大家展示了“angular4自定义组件的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“angular4自定义组件的示例分析”这篇文章吧。
成都创新互联公司专业为企业提供德惠网站建设、德惠做网站、德惠网站设计、德惠网站制作等企业网站建设、网页设计与制作、德惠企业网站模板建站服务,十多年德惠做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
在 Angular 中,我们可以使用 {{}} 插值语法实现数据绑定。
新建组件
$ ng generate component simple-form --inline-template --inline-style # Or $ ng g c simple-form -it -is # 表示新建组件,该组件使用内联模板和内联样式 //会自动为simple-form生成simple-form.component.ts文件,文件中的selector为:app-simple-form,自动添加了app-前缀
输出:
installing component create src/app/simple-form/simple-form.component.spec.ts // 用于单元测试 create src/app/simple-form/simple-form.component.ts // 新建的组件 update src/app/app.module.ts //Angular CLI 会自动更新 app.module.ts 文件。把新建的组件添加到 NgModule 的 declarations
数组中
app.module.ts更新后:
@NgModule({ declarations: [ AppComponent, SimpleFormComponent ], ... }) export class AppModule { }
创建 UserComponent 组件
import { Component } from '@angular/core'; @Component({ //Component 装饰器来定义组件的元信息 selector: 'sl-user', template: `大家好,我是{{name}}
我来自{{address.province}}省, {{address.city}}市
{{address | json}}
//Angular 内置的 json 管道,来显示对象信息 `, }) //定义组件类 export class UserComponent { name = 'name'; address = { province: 'province', city: 'city' } } //使用构造函数初始化数据 export class UserComponent { name: string; address: any; constructor() { this.name = 'name'; this.address = { province: 'province', city: 'city' } } } //接口使用 interface Address { province: string; city: string; } export class UserComponent { name: string; address: Address; constructor(){ this.name = 'name'; this.address = { province: 'province', city: 'city' } } }
定义数据接口( TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。)
interface Person { name: string; age: number; } let semlinker: Person = { name: 'semlinker', age: 31 };
声明 UserComponent 组件
// ... import { UserComponent } from './user.component';//载入 @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent, UserComponent],//声明 bootstrap: [ AppComponent ] }) export class AppModule { }
在AppComponent中使用 UserComponent 组件
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `//UserComponent 的 selector `, }) export class AppComponent {}
以上是“angular4自定义组件的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!