黑马程序员技术交流社区
标题: 【广州前端首发】Angular5语法核心课程（三） [打印本页]
作者: AreYouGlad 时间: 2018-1-12 19:11
标题: 【广州前端首发】Angular5语法核心课程（三）
本帖最后由 AreYouGlad 于 2018-1-12 19:11 编辑
查看更多精彩前端资源
特殊属性指令
class控制单个控制如果只控制一两个class, 可以使用这种方式
指令语法:[class.css类名]="表达式"
[HTML] 纯文本查看 复制代码
.btn-red {
color: red;
}
<!-- 通过isLong控制单个class的添加与移除, 这里点击按钮的时候改用直接书写表达式的方式进行值的修改 -->
<button [class.btn-red]="isLong" (click)="isLong = !isLong">点击添加移除样式</button>
批量控制[JavaScript] 纯文本查看 复制代码
<!-- 通过btnClasses控制多个class的添加与移除 -->
<button [ngClass]="btnClasses">批量添加控制class</button>
export class AppComponent {
// 批量控制按钮的class, 这里使用随机数的方式测试控制是否有效
btnClasses = {
a: Math.random() > 0.5,
b: Math.random() > 0.5,
c: Math.random() > 0.5,
d: Math.random() > 0.5
};
}
style控制单个控制[JavaScript] 纯文本查看 复制代码
<!-- 单个style控制 -->
<section [style.color]="sectionColor" [style.fontSize]="sectionSize">我是不一样的烟火</section>
export class AppComponent {
// 单个样式控制
sectionColor = 'pink';
sectionSize = '24px';
}
批量控制如果要批量控制多个style, 可以使用这种方式
指令语法: [ngStyle]="表达式"
[JavaScript] 纯文本查看 复制代码
<!-- 多个style控制 -->
<section [ngStyle]="sectionStyle">我是不一样的烟火</section>
export class AppComponent {
// 多个样式控制
sectionStyle = {
color: 'blue',
fontSize: '30px',
fontWeight: 'bold'
};
}
管道操作符管道在AngularJS中称为过滤器, 它的作用是格式化数据
语法:{{ 数据 | 管道函数:参数(可选) }}, 数据与管道函数中间使用的符号叫管道操作符
预览uppercase[HTML] 纯文本查看 复制代码
<!-- 为了演示便利, 这里的Angular加了引号就是一个普通字符串, 如果不加就是数据绑定 -->
<p ngNonBindable>{{ 'Angular' | uppercase }}</p>
lowercase[HTML] 纯文本查看 复制代码
<!-- 管道可以连续调用多个, 下面的执行过程是先转大写再转小写, 最终输出小写的angular -->
<p ngNonBindable>{{ 'Angular' | uppercase | lowercase }}</p>
number[JavaScript] 纯文本查看 复制代码
<div style="border: 4px solid red;">
<!-- 至少4位整数0位小数 => 0,365 -->
<p>{{ 365 | number: '4.0' }}</p>
<!-- 至少1位整数4位小数, 小数至多6位 => 3.141593-->
<p>{{ 3.14159265 | number: '1.4-6' }}</p>
<!-- 至少1位整数4位小数, 小数至多6位 => 3.1400 -->
<p>{{ 3.14 | number: '1.4-6' }}</p>
</div>
date[JavaScript] 纯文本查看 复制代码
<!-- 日期格式化为年月日 -->
<p>{{ currentTime | date:'yyyy-MM-dd' }}</p>
export class AppComponent {
// 日期管道测试
currentTime = Date.now();
}
json[HTML] 纯文本查看 复制代码
<!-- 把之前的城市数组转为JSON输出 => [ "北京", "上海", "广州", "深圳" ] -->
<p>{{ cityList | json }}</p>
管道链[HTML] 纯文本查看 复制代码
<p>{{ 'Angular' | slice:0:3 | uppercase }}</p>
组件化
组件化概念组件化是一种开发模式, 它把页面上每个独立的可视/可交互区域视为一个个组件
每个组件都是独立可复用的, 页面只不过是组件的容器，通过组件的自由组合形成功能完整的界面
组件化好处组件都是单一职责的, 每个组件实现一个功能, 基本上需求有变更只需迭代更新对应组件即可
组件具有高内聚低耦合的特性, 不会对其他组件造成过多干扰, 适合长久维护
使用组件的方式开发, 会让我们的HTML代码结构更加清晰, 提高可读性
代码组织方式创建组件
cli工具提供了自动创建angular文件的命令, 可快速创建文件
使用工具创建时需保证src/app/app.module.ts文件里没有任何注释, 否则会有问题
创建公共header组件组件内容详解
[JavaScript] 纯文本查看 复制代码
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
// 这个类实现了Oninit接口, 该接口定义了一个Oninit方法, 数据初始化的代码一般会写在这里, 比如发送请求获取数据
export class HeaderComponent implements OnInit {
constructor()
ngOnInit() {}
}
组件的使用方式每个组件定义时都有一个selector元数据, 元数据就是某种东西的固有特性
每个组件就是一个自定义标签, 标签名为selector元数据, 那里使用组件就在那里加上自定义标签即可
打开app.components.html文件, 加入下面的html代码然后查看浏览器效果
[HTML] 纯文本查看 复制代码
<app-header></app-header>
父子组件通讯
父传子第一步[HTML] 纯文本查看 复制代码
<app-header [title]="titleData"></app-header>
第二步子组件里导入Input装饰器, 然后定义相同的属性, 使用Input装饰器进行装饰即可自动接收来自父的数据
在子组件app/components/header.component.ts中写入如下html代码
[JavaScript] 纯文本查看 复制代码
import { Component, OnInit ,Input } from '@angular/core'; // 导入Input装饰器
export class HeaderComponent implements OnInit {
// 这个属性名必须和父传递值所用的属性名一致
// 使用Input装饰器装饰后即可接收来自父的数据
@Input() title:string
constructor() { }
ngOnInit() { }
}
测试[HTML] 纯文本查看 复制代码
<h2>头部组件, 由父组件指定的title: {{ title }}</h2>
数据自动更新当父里的数据发生变化时, 子会自动接收新的值然后重新渲染视图
在父组件app.component.html中写入如下html代码, 输入文本子组件跟着更新
[HTML] 纯文本查看 复制代码
<input type="text" [(ngModel)]="titleData">
<app-header [title]="titleData"></app-header>
子传父 - 方式一先创建一个新的组件: 'ng g component footer', 然后进行子传父练习
这种方式大概也是两步: 首先父给子传一个方法, 然后子调用这个方法给父传值
备注: 这种方式在React框架里面使用比较常见
第一步[JavaScript] 纯文本查看 复制代码
export class AppComponent {
parentFn(): void {
console.log('我是来自父的方法')
}
}
<!-- 注意[]里面的属性名是什么, 子就用什么属性名接收 -->
<app-header [fn]="parentFn"></app-header>
第二步[JavaScript] 纯文本查看 复制代码
import { Component, OnInit, Input } from '@angular/core';
export class FooterComponent implements OnInit {
// 使用Input装饰器装饰后, 就会接收父传入的方法
@Input() fn:any;
// 当组件初始化完毕后就会调用自动这个方法
ngOnInit() {
// 1秒后调用来自父的方法
setTimeou(() => {
this.fn();
}, 1000);
}
}
子传父 - 方式二先创建一个新的组件: 'ng g component aside', 然后进行子传父练习
这种方式大概也是两步: 首先父监听子组件的一个自定义事件, 然后子里面在需要的时候触发这个事件进行传值
备注: 这种方式在Vue框架里面使用比较常见
第一步[JavaScript] 纯文本查看 复制代码
<app-aside (sonEvent)="parentFn()"></app-aside>
export class AppComponent {
parentFn(): void {
console.log('我是来自父的方法')
}
}
第二步[JavaScript] 纯文本查看 复制代码
import { Component, OnInit, Output, EventEmitter} from '@angular/core';
export class FooterComponent implements OnInit {
// 创建EventEmitter实例, 并用output装饰器装饰
@Output() private sonEvent = new EventEmitter<string>();
ngOnInit() {
// 1秒后
setTimeout(() => {
this.sonEvent.emit();
console.log(123);
}, 1000);
}
父子通讯其他方式
父子通讯方式1第一步[HTML] 纯文本查看 复制代码
<app-footer #footer></app-footer>
第二步[HTML] 纯文本查看 复制代码
<p>{{ footer.msg }}</p>
<button (click)='footer.fn()'>点击执行子组件的方法</button>
父子通讯方式2第一步[HTML] 纯文本查看 复制代码
<app-footer #footer></app-footer>
第二步[JavaScript] 纯文本查看 复制代码
import { Component, ViewChild } from '@angular/core';
export class AppComponent {
// 提取footer子组件的属性与方法到父属性footer上
@ViewChild('footer') footer;
ngOnInit() {
// 父在需要的时候调用子的属性方法
console.log(this.footer);
}
}
作者: AreYouGlad 时间: 2018-1-12 19:11
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |