指令、管道以及子父组件传值
一、指令
1、系统指令
1)ngIf(else)
用于判断,可与else配套使用:if-else
html
<h3>成绩:{
{score}}</h3>
<button (click)="score = score + 1">更改成绩</button>
<h4>ngIf不使用else</h4>
<div *ngIf="score< 60">不及格</div>
<div *ngIf="score >= 60">及格</div>
<hr>
<h4>ngIf使用else</h4>
<div *ngIf="score < 60; else templateElse">不及格</div>
<ng-template #templateElse>及格</ng-template>
<hr>
ts
score:number = 59;
效果:
2)ngSwitch(ngSwitchCase)
用于判断:switch-case-default
html
<h3>会员等级:{
{vipNum}}</h3>
<button (click)="vipNum = vipNum + 1">提升等级</button>
<h4>使用ngSwitch</h4>
<div [ngSwitch]="vipNum">
<p *ngSwitchCase="1">普通会员</p>
<p *ngSwitchCase="2">白金会员</p>
<p *ngSwitchCase="3">黄金会员</p>
<p *ngSwitchDefault>会员等级未知</p>
</div>
ts
vipNum:number = 0;
效果:
3)for循环
html
<h3>for循环</h3>
<ul>
<li>不带index</li>
<li *ngFor="let item of [1,2,3]">{
{item}}</li>
</ul>
<ul>
<li>带index</li>
<li *ngFor="let item of [1,2,3] let i = index">{
{i}}:{
{item}}</li>
</ul>
<hr>
效果:
2、自定义指令(ng g d xxx)
需求:输入框自动获取焦点
步骤:
1)通过ng g d Focus生成指令文件(会在app文件夹下生成focus.directive.spec.ts和focus.directive.ts)
2)确保Focusdirective指令的模块引入是否正确(哪里要用就在哪个module.ts里引入),然后重启项目
3)编写focus.directive.ts文件进行自定义指令的实现
html
<input type="text" placeholder="自动获取焦点" value="默认值" appFocus>
focus.directive.ts
import {
Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appFocus]'
})
export class FocusDirective {
constructor(e: ElementRef) {
//获取input节点
let input = e.nativeElement;
//更改input的值(模拟异步)
setTimeout(() => {
input.value = '值修改了';
}, 1000);
//使input自动获取焦点
setTimeout(() => {
//通过计时器将这个事件最后执行
e.nativeElement.focus()
}, 0);
}
}
效果:
二、管道
1、系统管道
官方文档:Angular - API 列表
html
<h3>常用的管道</h3>
<ul>
<li>大写:{
{'Dai' | uppercase }}</li>
<li>小写:{
{'Dai' | lowercase}}</li>
<li>首字母大写:{
{'My name is dai' | titlecase}}</li>
<li>百分数:{
{0.33 | percent}}</li>
<li>百分数的小数位:{
{0.5555 | percent:'2.2'}}</li>
<li>钱(千位):{
{213421.321 | currency:'¥'}}</li>
<li>时间戳转化为时间:{
{time | date }}</li>
<li>时间戳转化为时间(格式化):{
{time | date:'yyyy-MM-dd' }}</li>
</ul>
效果:
2、自定义管道(ng g p xxx)
需求:根据数字显示相应的性别
步骤:
1)通过ng g p gender生成指令文件(会在app文件夹下生成gender.pipe.spec.ts和gender.pipe.ts)
2)确保GenderPipe指令的模块引入是否正确(哪里要用就在哪个module.ts里引入),然后重启项目
3)编写gender.pipe.ts文件进行自定义指令的实现
html
<h3>自定义管道</h3>
<table border="1">
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>性别en</td>
</tr>
<tr *ngFor="let item of personList; let i = index">
<td>{
{i}}</td>
<td>{
{item.name}}</td>
<td>{
{item.sex | gender}}</td>
<td>{
{item.sex | gender:'en'}}</td>
</tr>
</table>
ts
//人员信息
personList = [
{
name: 'dai',
sex: 0
},
{
name: 'dai2',
sex: 1
}
]
gender.pipe.ts
import {
Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'gender'
})
export class GenderPipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
//对传过来的参数进行判断
if(args.toString() == 'en'){
if (value == 1) return 'Male';
if (value == 0) return 'Female';
}
if (value == 1) return '男';
if (value == 0) return '女';
else return null
}
}
效果:
三、子父组件传值
Input(父传子)
父组件:
[属性名]=“xxx”
<login-view [name]="'戴望浩'" [title]="'Hello'"></login-view>
子组件:
ts
@Input(“属性名”) 属性名=默认值
@Input("name") name = "";
@Input("title") title = "";
html
<div class="title">{
{title}}{
{name}}</div>
效果:
Output(子传父)
子组件:
html
<!--设置子组件传参事件-->
<button (click)="login()">登录</button>
ts
//EventEmitter创建一个监听的对象test
@Output("test") test = new EventEmitter();
login() {
this.test.emit(设置传递的参数);
}
父组件:
html
<!--$event表示传入的参数-->
<login-view (test)="helloTest($event)"></login-view>
ts
helloTest(e){
console.log(e);//子组件传过来的参数
}
ViewChild(获取子组件的内容)
父组件html:要给需要获取的子组件绑定id #productlist
<h3>子组件</h3>
<button (click)="parentClick()">父组件的按钮</button>
<hr>
<app-productlist #productlist></app-productlist>
<app-productlist ></app-productlist>
父组件ts
import {
Component, OnInit, ViewChild } from '@angular/core';
import {
ProductlistComponent } from '../productlist/productlist.component';
@Component({
selector: 'app-productinfo',
templateUrl: './productinfo.component.html',
styleUrls: ['./productinfo.component.scss']
})
export class ProductinfoComponent implements OnInit {
@ViewChild('productlist') productlist: ProductlistComponent = <any>{
};
constructor() {
}
ngOnInit(): void {
}
//父组件按钮的事件,修改对应子组件的值
parentClick() {
this.productlist.number ++;
}
}
子组件html
{
{number}}
<button (click)="change()">子组件的按钮</button>
子组件ts
import {
Component, OnInit } from '@angular/core';
@Component({
selector: 'app-productlist',
templateUrl: './productlist.component.html',
styleUrls: ['./productlist.component.scss']
})
export class ProductlistComponent implements OnInit {
//定义数字
number: number = 1;
constructor() {
}
ngOnInit(): void {
}
//改变子组件的数据
change() {
this.number++;
}
}
效果:
以上就是指令、管道以及子父组件传值的知识,大家请关注《Angular 学习》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享,一起进步,加油。