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添加String.Format方法
Aug 11 Javascript
Javascript 面试题随笔
Mar 31 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
DOM 事件流详解
Jan 20 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 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基础知识:类与对象(1)
2006/12/13 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
python线程锁(thread)学习示例
2013/12/04 Python
Python连接DB2数据库
2016/08/27 Python
python3中str(字符串)的使用教程
2017/03/23 Python
提升Python程序性能的7个习惯
2019/04/14 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
数学专业推荐信范文
2013/11/21 职场文书
探矿工程师自荐信
2014/01/24 职场文书
总经理助理工作职责
2014/02/06 职场文书
信访工作个人总结
2015/03/03 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书