在 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. Python 闭包(Closure)

    Python  闭包 (Closure) 这里介绍一下python 的闭包 基本概念 闭包(closure)是函数式编程的重要的语法结构. 函数式编程的一个特点就是,允许把函数本身作为参数传入另一个函 ...

  2. Selenium WebDriver Api 知识梳理

    之前一直没有系统的梳理WebDriver Api的相关知识,今天借此机会整理一下. 1.页面元素定位 1.1.8种常用定位方法 # id定位 driver.find_element_by_id() # ...

  3. vue 里面引入高德地图

    效果图: 实现: 一:引入 高德,web-sdk (两种方式) 1:在html 中引入(我用的这一种) <script type="text/javascript" src= ...

  4. IBM messed up *AGAIN* in their thinkpad: 0xA0000 -> 0x9F000

    /*     * IBM messed up *AGAIN* in their thinkpad: 0xA0000 -> 0x9F000.     * They seem to have don ...

  5. apiCloud 浏览图片

    点击链接查看api详情 https://docs.apicloud.com/Client-API/Func-Ext/photoBrowser var photoBrowser = api.requir ...

  6. vue.js用select实现省,市,提交后,默认显示省,市信息

    <select v-model="citys" name="cityVal" @change="schoolName(citys)"& ...

  7. Routing a Marathon Race

    直接爆搜的复杂度是2^n,对于n<=40的数据过不了. 考虑优化一下. 发现如果走了一个点后,以后是不可能再经过与它相邻的点的,因为这样走显然不如直接走那个与它相邻的点. 这样每走一步就可以删掉 ...

  8. hdu6331 Walking Plan

    题意: sol: 考虑floyed 直接暴力做的话复杂度是kn^3会炸. 考虑一个比较神仙的分块做法. 注意到我们是可以直接求单独某个k的矩阵,使用矩阵快速幂即可(取min的矩阵乘法). 单独求一次的 ...

  9. python面向对象之 类的关系

    内容梗概: 1. 依赖关系 2. 关联关系, 组合关系, 聚合关系 3. 继承关系, self到底是什什么鬼? 4. 类中的特殊成员 1. 依赖关系def:在方法中给方法传递一个对象. 此时类与类之间 ...

  10. 6月13 ThinkPHP框架基础

    ThinkPHP 一.php框架基础介绍 真实项目开发步骤: 多人同时开发项目,协作开发项目.分工合理.效率有提高(代码风格不一样.分工不好) 测试阶段 上线运行 对项目进行维护.修改.升级(单个人维 ...