angular4自定义组件详解


Posted in Javascript onSeptember 28, 2017

在 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: `
  <h2>大家好,我是{{name}}</h2>
  <p>我来自<strong>{{address.province}}</strong>省,
   <strong>{{address.city}}</strong>市
  </p>
 <p>{{address | json}}</p>//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: `
  <sl-user></sl-user> //UserComponent 的 selector
 `,
})
export class AppComponent {}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
9个JavaScript评级/投票插件
Jan 18 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 #Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 #Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 #Javascript
node.js学习之断言assert的使用示例
Sep 28 #Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 #Javascript
node.js学习之事件模块Events的使用示例
Sep 28 #Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 #Javascript
You might like
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
Python实现一个简单的MySQL类
2015/01/07 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
教育科学研究生自荐信
2013/10/09 职场文书
医药大学生求职简历的自我评价
2013/10/17 职场文书
校三好学生主要事迹
2014/01/11 职场文书
预备党员政审材料
2014/02/04 职场文书
《王二小》教学反思
2014/02/27 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
鼋头渚导游词
2015/02/05 职场文书
阿甘正传观后感
2015/06/01 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
MySQL如何解决幻读问题
2021/08/07 MySQL
php将xml转化对象的实例详解
2021/11/17 PHP