文档章节

AngularJS2初学小结

Mercy_丶
 Mercy_丶
发布于 2016/06/18 16:04
字数 463
阅读 190
收藏 1

本文的实例中用到了ng2-bootStrap ,是用Angular2和bootStrap开发的第三方Component。感兴趣的同学可以戳链接看看。

###Component

  1. 自定义Component -在Angular2中使用@Component 注解在自定义组件:
import {Component} from '@angular/core';
import {AlertComponent, DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
  selector: 'my-app',
  directives: [AlertComponent],
  templateUrl:'Demo.html'
})
export class AppComponent {
}

其中Demo.html就是一个html文件内容如下:

<alert type="info">ng2-bootstrap hello world!</alert>

你就可以在你的index.html中使用<my-app></my-app>

截图如下:

2.@Component 的属性 在@Component中有几个比较常用的属性,上面的eg中出现了三个。

  • selector 相当与html的标签。
  • directives 在你的Component 中使用到其他Component的类名。(在上eg.中我们使用到了ng2-bootstrap的<alert></alert>标签,他的类名为AlertComponent)
  • templateUrl 自定义的组件的html元素。

当然还有一些其他的常用属性,现在几个我比较常用的几个属性

3.inputs 和 outputs

  • inputs :此处的input和html的<input></input> 没有半毛钱关系 将自定义组件的某个值作为一个input,希望有上级组件为其赋值。 usage:
import {Component} from '@angular/core';
import {AlertComponent, DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
  selector: 'demo',
  inputs: ['h2Value'],
  template: `
    <h2>{{h2Value}}</h2>
  `
})
export class InputComponent {
  public h2Value: string = "Hello";
}
@Component({
  selector: 'my-app',
  directives: [InputComponent],
  template: `
  <div>
  <demo [h2Value]="customValue"></demo>
  </div>
  `
})
export class AppComponent {
  customValue: string = "Hello World!";
}

可以看到在第一个Component中<h2>的innerHTML为h2Value 是一个input,在AppComponent我们引用了他,故[h2Value]可以当做<demo></demo>标签中一个属性,并将其复制为customValue,为了与正常的html属性区别开,angular2将放在[]中。

© 著作权归作者所有

下一篇: 杂记
Mercy_丶
粉丝 8
博文 40
码字总数 16292
作品 0
私信 提问
node npm install 报错

E:\angularJs2\angular2-seed-master>npm install > bufferutil@1.2.1 install E:\angularJs2\angular2-seed-master\node_modules\bufferutil > node-gyp rebuild E:\angularJs2\angular2-se......

guo_sunshine
2016/03/16
3.7K
1
achui_1980/angular2-quickstart

angular2-quickstart This project is generated with yo angular2-typescript generator version 0.4.0. Installation $ npm install typescript -g$ npm start Production Build $ npm run......

achui_1980
2016/09/10
0
0
关于angularjs的一些看法

angularjs真是一把利器,作为mvvm的一员,数据双向绑定,麻麻再也不用担心我怎么页面绑定和取数了。 它的原理其实是解析dom,增加监听,实现几乎实时的数据双向绑定。 作为入门,你应该要学会...

钢铁之翼
2016/11/23
25
0
前端教程

IONIC(基于angular) 教程: 菜鸟教程:http://www.runoob.com/ionic/ionic-tutorial.html NPM: 1、安装依赖:npm install -g ionic cordova 2、创建项目:ionic start myIonicApp IONIC2......

jason_wu_2
2016/10/11
30
0
npm如何才能不下载源码

最近在学习angularjs2,头一次接触nodejs。发现npm install的时候会下载源码,可不可以有什么选项让它不下载源码啊?

哎码
2016/08/06
803
3

没有更多内容

加载失败,请刷新页面

加载更多

高速PCB设计软件allegro中与网络有关的约束规则设置

在allegro pcb的设计过程中,设计约束规则包括时序规则、间距规则、信号完整性规则以及物理规则等,本期主要详细讲解与物理、间距与电气约束中的线宽、线间距物理规则的设置。 一、线宽设置 ...

demyar
20分钟前
2
0
Linux 启动停止SpringBoot jar 程序部署Shell 脚本

#!/bin/bash #这里可替换为你自己的执行程序,其他代码无需更改 APP_NAME=algorithm.jar #使用说明,用来提示输入参数 usage() { echo "Usage: sh 执行脚本.sh [start|stop|restart|status]...

草庐过客
22分钟前
3
0
mysql-connector-java驱动升级到8.0后数据库保存时间出现时差

1.问题:在一个新项目中用到了新版的mysql jdbc 驱动后,发现保存到数据库的时间出现了时差 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId>......

ValSong
23分钟前
3
0
好程序员大数据教程Scala系列之隐式转换和隐式参数

5.1. 概念 隐式转换和隐式参数是Scala中两个非常强大的功能,利用隐式转换和隐式参数,你可以提供优雅的类库,对类库的使用者隐匿掉那些枯燥乏味的细节。 5.2. 作用 隐式的对类的方法进行增强...

好程序员官网
27分钟前
3
0
多线程必备

初次接触线程,可能有很多初学者搞不明白,始终云里雾里,那么本篇文章直接带大家介绍多线程必须知道的几个点 接下来没有多余,直接上干货 1. 进程和线程的区别是什么? 进程是执行着的应用程序,...

理性思考
30分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部