Angular学习笔记—基础（转载）

创建简单组件

新建组件

$ ng generate component simple-form --inline-template --inline-style
# Or
$ ng g c simple-form -it -is # 表示新建组件，该组件使用内联模板和内联样式

在命令行窗口运行以上命令后，将输出以下内容：

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

即执行上述操作后，创建了两个文件：

• simple-form.component.spec.ts - 用于单元测试

• simple-form.component.ts - 新建的组件

除此之外，

update src/app/app.module.ts

 表示执行上述操作后，Angular CLI 会自动帮我们更新 

app.module.ts

 文件。所更新的内容是把我们新建的组件添加到 

NgModule

 的 

declarations

 数组中，具体如下：

@NgModule({
declarations: [
AppComponent,
SimpleFormComponent
],
...
})
export class AppModule { }

使用组件

AppComponent

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

@Component({
selector: 'app-root',
template: `
<h3>{{title}}</h3>
<div>
<app-simple-form></app-simple-form>
</div>
`
})
export class AppComponent {
title = 'Hello, Angular';
}

SimpleFormComponent

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

@Component({
selector: 'app-simple-form',
template: `
<p>
simple-form Works!
</p>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

从生成的 

SimpleFormComponent

 组件中，我们发现组件的 

selector

 是 

app-simple-form

，而我们是使用以下命令创建该组件：

$ ng g c simple-form -it -is

即 Angular CLI 在创建组件时，自动帮我们添加了前缀。那为什么前缀是 

app

 呢？答案是在项目根目录下的 

.angular-cli.json

 文件中，已经默认帮我们配置了默认的前缀，具体如下：

{
...
"apps": [
{
"root": "src",
"outDir": "dist",
...
"prefix": "app",
...
}
],
}

当然你可以根据实际需求，自行更改默认的前缀配置。

 

事件和模板引用

在 Angular 中，我们可以使用 

(eventName)

 语法，进行事件绑定。此外，可以使用 

#variableName

 的语法，定义模板引用。具体示例如下：

SimpleFormComponent

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

@Component({
selector: 'app-simple-form',
template: `
<div>
<input #myInput type="text">
<button (click)="onClick(myInput.value)">点击</button>
</div>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
onClick(value) {
console.log(value);
}

ngOnInit() {}
}

需要注意的是，若我们改变绑定的表达式为 

(click)="onClick(myInput)"

 ，当我们点击按钮时，控制台输出的结果是：

<input type="text">

通过该输出结果，我们可以知道 

#variableName

 语法，我们获取的对象是对应 DOM 元素的引用。

获取鼠标事件

假如我们需要获取鼠标事件，那应该怎么办呢？这时，我们可以引入 

$event

 变量，具体如下：

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

@Component({
selector: 'app-simple-form',
template: `
<div>
<input #myInput type="text">
<button (click)="onClick($event, myInput.value)">点击</button>
</div>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
onClick(event, value) {
console.log(event);
console.log(value);
}
ngOnInit() {}
}

成功运行以上代码，当我们点击按钮时，控制台将输出：

MouseEvent {isTrusted: true, screenX: 180, screenY: 207, clientX: 165,
clientY: 75…}

需要注意的是，参数名一定要使用 

$event

 ，否则无法获取正确的鼠标事件。此外，

onClick($event, myInput.value)

 表达式中，

$event

 的顺序是任意的，如：

<button (click)="onClick(myInput.value, $event)">点击</button>

当 Angular 在调用我们的事件处理函数时，会自动帮我们处理调用的参数。

$event

 自动映射为触发的事件，与我们 

Provider

 中 

Token

 的作用类似。除了监听鼠标事件外，我们还可以监听键盘事件。

获取键盘事件

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

@Component({
selector: 'app-simple-form',
template: `
<div>
<input #myInput type="text" (keydown.enter)="onEnter($event, myInput.value)">
<button (click)="onClick($event, myInput.value)">点击</button>
</div>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
// ...
onEnter(event, value) {
console.log(event);
console.log(value);
}
}

以上代码中， 

(keydown.enter)="onEnter($event, myInput.value)"

 表达式表示我们监听键盘 

enter

 键的按下事件，当我们按下键盘的 

enter

 键时，将会调用组件类中定义的 

onEnter()

 方法。我们同样也可以通过 

$event

 来获取 

KeyboardEvent

 对象。

 

注入服务

新建服务

$ ng g s mail

在命令行窗口运行以上命令后，将输出以下内容：

installing service
create src/app/mail.service.spec.ts
create src/app/mail.service.ts
WARNING Service is generated but not provided, it must be provided to be used

即执行上述操作后，创建了两个文件：

• mail.service.spec.ts - 用于单元测试

• mail.service.ts - 新建的服务

除此之外，

WARNING Service is generated but not provided,...

 表示执行上述操作后，Angular CLI 只会帮我们创建 

MailService

 服务，不会自动帮我们配置该服务。

配置服务

import {MailService} from "./mail.service";

@NgModule({
...
providers: [MailService],
bootstrap: [AppComponent]
})
export class AppModule { }

更新服务

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

@Injectable()
export class MailService {
message: string  ='该消息来自MailService';
constructor() { }
}

使用服务

import { Component } from '@angular/core';
import {MailService} from "./mail.service";

@Component({
selector: 'app-root',
template: `
<h3>{{title}}</h3>
<div>
<app-simple-form></app-simple-form>
{{mailService.message}}
</div>
`
})
export class AppComponent {
title = 'Hello, Angular';
constructor(private mailService: MailService) {}
}

除了使用 

constructor(private mailService: MailService)

 方式注入服务外，我们也可以使用 

Inject

 装饰器来注入 

MailService

 服务：

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

@Component({...})
export class AppComponent {
title = 'Hello, Angular';

constructor(@Inject(MailService) private mailService) {}
}

不过对于 

Type

 类型(函数类型) 的对象，我们一般使用 

constructor(private mailService: MailService)

 方式进行注入。而 

Inject 

装饰器一般用来注入非 

Type

 类型的对象。

使用Inject装饰器

AppModule

@NgModule({
...
providers: [
MailService,
{provide: 'apiUrl', useValue: 'https://jsonplaceholder.typicode.com/'}
],
bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent

@Component({
selector: 'app-root',
template: `
<h3>{{title}}</h3>
<div>
<app-simple-form></app-simple-form>
{{mailService.message}}
<p>API_URL: {{apiUrl}}</p>
</div>
`
})
export class AppComponent {
title = 'Hello, Angular';

constructor(
@Inject(MailService) private mailService,
@Inject('apiUrl') private apiUrl
) {}
}

 

组件样式

在 Angular 中，我们可以在设置组件元数据时通过 

styles

 或 

styleUrls 

属性，来设置组件的内联样式和外联样式。

使用 styles 属性

import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';

@Component({
selector: 'app-simple-form',
template: `
...
`,
styles: [`
:host { margin: 10px; }

input:focus { font-weight: bold;}
`
]
})
export class SimpleFormComponent implements OnInit {
@Input() message: string;
@Output() update = new EventEmitter<{text: string}>();

ngOnInit() {}
}

上面示例中 

:host

 表示选择宿主元素，即 

AppComponent

 组件模板中的 

app-simple-form

 元素。

用过 AngularJS 1.x 的同学，对 

ng-class

 应该很熟悉，通过它我们能够根据条件，为元素动态的添加或移除对应的样式。在 Angular 中，对应的指令是 

ngClass

 。接下来我们来看一下，

ngClass

 指令的具体应用。

使用 ngClass 指令

ngClass

 指令接收一个对象字面量，对象的 

key

 是 CSS class 的名称，

value

 的值是 

truthy/falsy

 的值，表示是否应用该样式。

@Component({
selector: 'app-simple-form',
template: `
<div>
{{message}}
<input #myInput
type="text"
[(ngModel)]="message"
[ngClass]="{mousedown: isMousedown}"
(mousedown)="isMousedown = true"
(mouseup)="isMousedown = false"
(mouseleave)="isMousedown = false"
>
<button (click)="update.emit({text: message})">更新</button>
</div>
`,
styles: [`
:host { margin: 10px; }

.mousedown { border: 2px solid green; }

input:focus { font-weight: bold; outline: none;}
`
]
})
export class SimpleFormComponent implements OnInit {
isMousedown: boolean;
// ...
}

ngClass 指令用法

<!-- 使用布尔值 -->
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>

<!-- 使用组件实例的属性 -->
<div [ngClass]="{bordered: isBordered}">
Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>

<!-- 样式名包含'-' -->
<div[ngClass]="{'bordered-box': false}">
Class names contains dashes must use single quote
</div>

<!-- 使用样式列表 -->
<div class="base" [ngClass]="['blue', 'round']">
This will always have a blue background and round corners
</div>

除了 

ngClass

 指令外，Angular 还为我们提供了 

ngStyle

 指令。

使用 ngStyle 指令

ngStyle

 指令让我们可以方便得通过 Angular 表达式，设置 DOM 元素的 CSS 属性。

ngStyle 指令用法

<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
Uses fixed white text on blue background
</div>

需要注意的是， 

background-color

 需要使用单引号，而 

color

 不需要。这其中的原因是，

ng-style

 要求的参数是一个 

Javascript

 对象，

color

 是一个有效的 

key

，而 

background-color

 不是一个有效的 

key

 ，所以需要添加 

''

。

对于一些场合，我们也可以直接利用 Angular 属性绑定的语法，来快速设置元素的样式。

• 设置元素的背景颜色

<div [style.background-color="'yellow'"]>
Use fixed yellow background
</div>

• 设置元素的字体大小

<!-- 支持单位: px | em | %-->
<div>
<span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
Red Text
</span>
</div>

 

 

 

转载自：

Angular 4 基础教程

 

转载于:https://www.cnblogs.com/Jason-Xiang/p/9284567.html

• 点赞
• 收藏
• 分享
• 文章举报

dmxhcwk90096748 发布了0 篇原创文章 · 获赞 0 · 访问量 488 私信 关注