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 相关文章推荐
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
JSON.stringify()方法讲解
Jan 31 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将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
python实现矩阵乘法的方法
2015/06/28 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Python:slice与indices的用法
2019/11/25 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python的flask框架难学吗
2020/07/31 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
文职个人求职信范文
2013/09/23 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
教师节老师寄语
2015/05/28 职场文书
初中同学会致辞
2015/08/01 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
Python初识逻辑与if语句及用法大全
2021/08/07 Python