在 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:
};

声明 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 {}

angular4-自定义组件的更多相关文章

  1. angular4自定义组件非input元素实现ngModel双向数据绑定

    在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... ...

  2. ionic3+angular4开发混合app 之自定义组件

    这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了 ...

  3. ionic3.x angular4.x ng4.x 自定义组件component双向绑定之自定义计数器

    本文主要示例在ionic3.x环境下实现一个自定义计数器,实现后最终效果如图: 1.使用命令创建一个component ionic g component CounterInput 类似的命令还有: ...

  4. Android开发之自定义组件和接口回调

    说到自定义控件不得不提的就是接口回调,在Android开发中接口回调用的还是蛮多的.在这篇博客开始的时候呢,我想聊一下iOS的自定义控件.在iOS中自定义控件的思路是继承自UIView, 在UIVie ...

  5. Android自定义组件

    [参考的原文地址] http://blog.csdn.net/l1028386804/article/details/47101387效果图: 实现方式: 一:自定义一个含有EditText和Butt ...

  6. 自己写的几个android自定义组件

    http://www.see-source.com/androidwidget/list.html 多多指点,尤其是自定义组件的适配问题,希望能有更好的方法

  7. PhoneGap: Android 自定义组件

    Hello Core Demo Plugin Development(组件部署): http://docs.phonegap.com/en/2.0.0/guide_plugin-development ...

  8. android开发之自定义组件

    android开发之自定义组件 一:自定义组件: 我认为,自定义组件就是android给我们提供的的一个空白的可以编辑的图片,它帮助我们实现的我们想要的界面,也就是通过自定义组件我们可以把我们要登入的 ...

  9. HTML5 UI框架Kendo UI Web教程:创建自定义组件(三)

    Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...

  10. HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

随机推荐

  1. nodejs导出excel

    //导出Excel var nodeExcel = require("excel-export"); var fs = require("fs"); var c ...

  2. Java类成员变量的默认值

    1.布尔型(boolean)变量默认值为false,byte.short.int.long为0,字符型为'\u0000'(空字符),浮点型(float double)为0.0,引用类型(String) ...

  3. Nested Comment Treads in ROR

    建立一个嵌套的评论 建立数据库结构和嵌套视图(使用Stimulus取元素和绑event) 可以删除评论,可以对嵌套视图的层数进行控制. 用Ajax代替完全的刷新页面. 删除一个评论,但不丢失它的子评论 ...

  4. vue基础 (三) 自动化工具(Vue CIL)

    一.自动化工具(Vue CIL) 安装过程 1. 先安装nvm 参考:https://www.jianshu.com/p/d0e0935b150a https://www.cnblogs.com/tj ...

  5. jq 倒计时

    引入jq 注 在IE和safari 如果时间出现NAN 将时间格式改为YYYY/MM/DD HH:MM:SS 例:var d2 = new Date("2019/02/18 15:59&qu ...

  6. ml基本问题

    作者:NgShawn 链接:https://www.nowcoder.com/discuss/33737?type=2&order=3&pos=19&page=1 来源:牛客网 ...

  7. Spring boot(三)在Spring boot中Redis的使用

    spring boot对常用的数据库支持外,对nosql 数据库也进行了封装自动化. redis介绍 Redis是目前业界使用最广泛的内存数据存储.相比memcached,Redis支持更丰富的数据结 ...

  8. 一、集合框架(HashMap和Hashtable的区别)

    一.HashMap和Hashtable 都实现了Map接口,都是以key-value形式保存数据. 区别一: HashMap可以存放null Hashtable不能存放null 区别二: HashMa ...

  9. Redis php常用操作

    $redis = new redis(); //连接 $redis->connect('127.0.0.1',6379); // //设置值 $result = $redis->set(' ...

  10. JBOSS禁用delete和put方法教程

    一.背景说明(与此节修复没多大关系可跳过) 今天应用报扫描出“启用不安全的HTTP方法”漏洞需要进行修复,看后边还有IIS的修复建议:一边不满怎么用IIS一边研究了具体操作半天,由于IIS不同版本操作 ...