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编程起步(第六课)
Feb 27 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
node中的cookie的具体使用
Sep 13 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
详解CocosCreator项目结构机制
Apr 14 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实现等比压缩图片大小
2016/03/04 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python开发的实用计算器完整实例
2017/05/10 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python语法分析之字符串格式化
2019/06/13 Python
Python实现元素等待代码实例
2019/11/11 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
投资建议书模板
2014/05/12 职场文书
美化环境标语
2014/06/20 职场文书
党员作风建设整改方案
2014/10/27 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
2015年女生节活动总结
2015/02/27 职场文书
质检员工作总结2015
2015/04/25 职场文书
户外拓展训练感想
2015/08/07 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
Java实现给Word文件添加文字水印
2022/02/15 Java/Android