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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
详解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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
使用django-crontab实现定时任务的示例
2018/02/26 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python实时监控cpu小工具
2018/06/21 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
python logging模块的使用总结
2019/07/09 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
python中的插入排序的简单用法
2021/01/19 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
往来会计岗位职责
2013/12/19 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
车间核算员岗位职责
2014/07/01 职场文书
博士生导师推荐信
2014/07/08 职场文书
通知的写法
2015/04/23 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
python单元测试之pytest的使用
2021/06/07 Python
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python