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 解析后的xml对象的读取方法细解
Jul 25 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
上传多个文件的PHP脚本
2006/11/26 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
php提高网站效率的技巧
2015/09/29 PHP
js left,right,mid函数
2008/06/10 Javascript
js+css在交互上的应用
2010/07/18 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
Python类装饰器实现方法详解
2018/12/21 Python
python实现用户名密码校验
2020/03/18 Python
python使用建议技巧分享(三)
2020/08/18 Python
python 绘制场景热力图的示例
2020/09/23 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
yy司仪主持词
2014/03/22 职场文书
天猫活动策划方案
2014/08/21 职场文书
西安导游词
2015/02/12 职场文书
借条格式范本
2015/05/25 职场文书
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers
Python软件包安装的三种常见方法
2022/07/07 Python