文档章节

angular2笔记

那些薄凉的小时光91
 那些薄凉的小时光91
发布于 2017/09/04 11:13
字数 876
阅读 5
收藏 1

1.使用[(ngModel)]="name",必须选择使用FormsModule模块

虽然NgModel是一个有效的Angular指令,但它默认情况下却是不可用的。 它属于一个可选模块FormsModule。 我们必须选择使用那个模块。

在app.module.ts文件中

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

2.ngFor

<li *ngFor="let hero of heroes">

ngFor*前缀表示<li>及其子元素组成了一个主控模板。

ngFor指令在AppComponent.heroes属性返回的heroes数组上迭代,并输出此模板的实例。

引号中赋值给ngFor的那段文本表示“heroes数组中取出每个英雄,存入一个局部的hero变量,并让它在相应的模板实例中可用”。

3.事件

<li *ngFor="let hero of heroes" (click)="onSelect(hero)"> ... </li>

圆括号标识<li>元素上的click事件是绑定的目标。 等号右边的onSelect(hero)表达式调用AppComponentonSelect()方法,并把模板输入变量hero作为参数传进去。

4.*ngIf="selectedHero"

5.<li [class.selected]="hero === selectedHero" > </li>

6.命名

文件名:hero-detail.component.ts(大驼峰形式,并且以Component结尾)

组件类名:HeroDetailComponent(小写中线形式,每个单词之间用中线分隔,并且以.component.ts结尾)

7.组件

import { Component } from '@angular/core';

@Component({
  selector: 'hero-detail',
})
export class HeroDetailComponent {
}

要定义一个组件,我们总是要先导入符号Component

@Component装饰器为组件提供了Angular元数据。 CSS选择器的名字hero-detail会匹配元素的标签名,用于在父组件的模板中标记出当前组件的位置。

总是export这个组件类,因为你必然会在别处import它。

父组件与子组件之间的通信(父组件是列表页,子组件是详情页)

父组件的模板中:<hero-detail [hero]="selectedHero"></hero-detail>

子组件:import { Component, Input } from '@angular/core';

            export class HeroDetailComponent { @Input() hero: Hero; }

            然后在子组件的模板中就能用hero.xxx了

它所做的一切就是通过它的输入属性hero接收一个英雄对象,然后把这个属性绑定到自己的模板中。

具体参照父子组件之间通信http://blog.csdn.net/u010730126/article/details/68080139

8.定义的组件要在AppModule中声明

import { HeroDetailComponent } from './hero-detail.component';

HeroDetailComponent添加到该模块的declarations数组中。

declarations: [
  AppComponent,
  HeroDetailComponent
],

9.创建服务

命名:文件名:special-super-hero.service.ts 服务名:SpecialSuperHeroService

import { Injectable } from '@angular/core';

@Injectable()
export class HeroService {
}

我们导入了 Angular 的Injectable函数,并作为@Injectable()装饰器使用这个函数。

当 TypeScript 看到@Injectable()装饰器时,就会记下本服务的元数据。 如果 Angular 需要往这个服务中注入其它依赖,就会使用这些元数据。

导入HeroService

import { HeroService } from './hero.service';

在运行中获得一个具体的HeroService实例

注入 HeroService

  • 添加一个构造函数,并定义一个私有属性。

  • 添加组件的providers元数据。

 

constructor(private heroService: HeroService) { }

我们还得注册一个HeroService提供商,来告诉注入器如何创建HeroService。 要做到这一点,我们在@Component组件的元数据底部添加providers数组属性如下:

10.如何创建服务并使用

一.新建一个服务my-comp.service.ts及使用方法

import{Injectable}from'@angular/core';

@Injectable()

   export classMyCompService{

     constructor() {}

     hello(){

       console.log(3456)

       alert(3456)

    }

  }

二,创建服务

app.module.ts,引入服务,在declarations中声名服务,并在provides中注册服务

三,在组件函数中调用服务

注册

import{MyCompService}from'./my-comp.service';

使用

constructor(private serves: MyCompService){
serves.hello();
}

© 著作权归作者所有

共有 人打赏支持
上一篇: scss
下一篇: 构造函数
那些薄凉的小时光91
粉丝 3
博文 23
码字总数 4753
作品 0
昌平
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
Angular 5 升级至Angular 7

根据升级建议,应该先从Angular 5升级至Angular 6,再从Angular 6升级至Angular 7。 本文内容“升级前-升级”适用于想从Angular 5升级至Angular 6的小伙伴; 本文内容“升级后”适用于想从A...

Hermy
2018/12/20
0
0
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
AngularJs学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

求推广,德邦快递坑人!!!!

完全没想好怎么来吐槽自己这次苦逼的德邦物流过程了,只好来记一个流水账。 从寄快递开始: 2019年1月15日从 德邦物流 微信小app上下单,截图如下: 可笑的是什么,我预约的是17号上门收件,...

o0无忧亦无怖
20分钟前
0
0
Mac Vim配置

1.升级 vim   我自己 MacBook Pro 的系统还是 10.11 ,其自带的 vim 版本为 7.3 ,我们将其升至最新版: 使用 homebrew : brew install vim --with-lua --with-override-system-vim 这将下...

Pasenger
32分钟前
0
0
vmware安装Ubuntu上不了网?上网了安装不了net-tools,无法执行ifconfig?

1.重新设置网络适配器还是不行,如下指定nat 2.还需要指定共享网络,我是在无线环境下 3.无法执行ifconfig https://packages.ubuntu.com/bionic/net-tools到这个网站下载net-tools的deb文件...

noob_chr
59分钟前
1
0
解决SVN:E210007无法协商认证机制

svn:E210007 svn: Cannot negotiate authentication mechanism 执行下面代码即可 sudo yum install cyrus-sasl cyrus-sasl-plain cyrus-sasl-ldap...

临江仙卜算子
59分钟前
1
0
java8的时间和`Date`的对比

java8的时间和Date的对比 java8提供了新的时间接口。相对Date,Calendar,个人感觉最大的好处是对时间操作的学习成本很低,比Calendar低。 1. LocalDate,LocalTime,LocalDateTime LocalDate 代...

北风刮的不认真了
59分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部