Angular组件之间的交互

其他 2018-07-07 19:53:30 阅读次数: 0

转载地址：https://www.cnblogs.com/nangxi/articles/7630579.html


Angular组件之间的交互分为：

1.通过输入型绑定把数据从父组件传到子组件。

2.通过setter截听输入属性值的变化

3.通过ngOnChanges()来截听输入属性值的变化

4.父组件监听子组件的事件

5.父组件与子组件通过本地变量互动

6.父组件调用@ViewChild()

7.父组件和子组件通过服务来通讯

这些在Angular的中文官方文档都有，类似的博客一大堆，写这篇博客的目的不是说把人家做过的东西再做一遍，而是把人家做过的东西转化成自己的东西，这样才是有用的。

在博客正式开始之前我们先介绍一下项目目录

----------app.component.ts

----------app.component.html

----------app.component.css

----------app.module.ts

----------child(文件夹)

--------------child.component.ts

--------------child.component.html

--------------child.component.css

一、通过输入型绑定把数据从父组件传到子组件

这个通讯方法的操作很简单，父组件发送自己的数据给子组件，子组件接收父组件传递过来的数据。
1.app.component.html 
<child [childData]="appData"></child><!--childData是子组件的接收参数，appData是父组件传递的数据，整个数据传递过程的重点，桥梁-->
2.app.component.ts
复制代码 
import { Component } from '@angular/core';
import { ChildComponent } from './child/child.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  appData=['Apple','Banana','watermelon','pear'];
}
复制代码
3.child.component.ts
复制代码 
import { Component,Input } from '@angular/core';//记得导入Input装饰器

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  title = 'child';
  @Input() childData:any;//接收数据的接口
}
复制代码
4.child.component.html 
<ul>
    <li *ngFor="let children of childData; let num1 = index">{{num1}}--{{children}}</li>
</ul>
<ul>
    <li *ngFor="let children of childData; index as num2">{{num2}}--{{children}}</li><!--index的第二种写法-->
</ul>
我们第一个实验将父组件的数组传递给子组件然后渲染出来，效果是这样的


二、通过setter截听输入属性值的变化

这种交互方式的书写格式有些不太符合我们平时的书写规范
1.app.component.html 
<child *ngFor="let app of appData" [child]="app"></child>
2.app.component.ts
复制代码 
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  appData=['Apple','Banana',' ','pear']; //父组件数据
}
复制代码
3.child.component.ts
复制代码 
import { Component,Input } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  title = 'child';
  private _name = ''; //定义一个私有向量，来暂时储存父组件传递过来的数据
  @Input() set child(name: string) { //child是我们用来接收父组件传递过来的数据的一个变量，我们用setter来截取到这个变量，然后做一些修改，child这个变量名
                                       //它是取决于父组件app.component.html里面的[child]="app"，不能随便改动，child的形参名字可以随便修改
    this._name = name.trim() || 'Oranges'; //会trim掉名字里的空格，并把空值替换成Oranges。
  }
 
  get child(): string{ //用get重新获取重置过后的child变量，这个过程中_name这个是有变量就用到了
      return this._name;
  }
}
复制代码
4.child.component.html 
<p>{{child}}</p>
我们第二个实验的效果是这样的

三、通过ngOnChanges()来截听输入属性值的变化

OnChanges是一个生命周期钩子，一旦检测到该组件(或指令)的输入属性发生了变化，Angular就会调用它的ngOnChanges()方法。
1.app.component.html
复制代码 
<table>
    <tr>
        <td>ID</td>
        <td><input type="text" [(ngModel)]="id"/></td>
    </tr>
    <tr>
        <td>PassWord</td>
        <td><input type="text" [(ngModel)]="password"/></td> <!--使用ngModel要记住在app.module.ts里面添加FormsModule-->
    </tr>
    <tr colspan="2">
        <td><button (click)="reset()">Reset Log</button></td>
    </tr>
</table>
<div>
    <child [id]="id" [password]="password"></child>
</div>
复制代码
2.app.component.ts
复制代码 
import { Component,ViewChild } from '@angular/core';//这里使用了我们第六点将会用到的父组件调用@ViewChild()，第六点细讲
import { ChildComponent } from './child/child.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    id:number;
    password:number;
    @ViewChild(ChildComponent) childView: ChildComponent;//此处先忽略不看
    constructor() {
      this.reset();//构造函数，有初始化id和password的功能
    }

    reset() {
        this.id = 100001;
        this.password = 123456;
        if (this.childView) { 
            this.childView.reset(); 
        }
      }
}
复制代码
3.child.component.ts
复制代码 
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnChanges {
  title = 'child';
  @Input() id: number;
  @Input() password: number;
  changeLog: string[] = []; //这个数组用来存放修改日志，修改一个input就会储存相应的记录
  ngOnChanges(changes: SimpleChanges) {
      for (let propName in changes) {
          let chng = changes[propName];
          let cur  = JSON.stringify(chng.currentValue);//修改前的数据
          let prev = JSON.stringify(chng.previousValue);//修改后的数据
          this.changeLog.push(`${propName}被修改了: 前一个数据 = ${cur}, 后一个数据 = ${prev}`);
        }
    }
    reset() { 
      this.changeLog.length = 0; //清除日志
    }
}
复制代码
4.child.component.html 
<div class="hero">
    <h4>-- Change Log --</h4>
    <div *ngFor="let chg of changeLog">{{chg}}</div> <!--将日志一条一条打印出来-->
</div>
我们第三个实验的效果是这样的

四、父组件监听子组件的事件

通过@Output装饰器自定义一个方法，在需要emits(向上弹射)的函数里面弹射变量
1.app.component.html 
<p>{{title}}</p>
<child (onClick)="onCli($event)"></child> <!--onClick是子组件自定义的事件，触发onClick事件，执行父组件的onCli()方法-->
2.app.component.ts
复制代码 
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title="你还没点击按钮";
    onCli(isClick: boolean) { //父组件的方法，更换title的值
        if(isClick){ //如果子组件弹射出来的变量为true
            this.title="你点击了按钮"; //那么就更改title
        } 
      }
}
复制代码
3.child.component.ts
复制代码 
import { Component, EventEmitter, Output } from '@angular/core';//注意导入

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent{
  title = 'child';
  @Output() onClick = new EventEmitter<boolean>();//暴露自定义事件onClick
  click(isClick: boolean) { //click()只是一个普通的方法
    this.onClick.emit(isClick);//向父组件弹射isClick变量，这个变量在button被点击的时候触发
  }
}
复制代码
4.child.component.html 
<button (click)="click(true)">点击</button> <!--给click方法传入true-->
这种父子组件之间的通讯方式，需要注意以下几点：
1.在子组件里面定义并暴露出自定义事件；
2.在子组件里面需要弹射的函数里面弹射变量；
3.在父组件里面通过$event接收变量。
我们第四个实验的效果是这样的

五、父组件与子组件通过本地变量互动

这种通讯比较简单，而且父组件可以同时调用子组件的变量或方法
1.app.component.html 
<p>{{title}}</p><!--调用父组件自己的变量-->
<p>{{data.title}}</p><!--调用子组件的变量-->
<child #data></child><!--在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法-->
<button (click)="data.click()">点击</button><!--调用子组件的方法-->

2.app.component.ts
复制代码 
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title="app";//父组件的变量
}
复制代码
3.child.component.ts
复制代码 
import { Component } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent{
  title = 'child';//子组件的变量
  click(){//子组件的方法
      this.title="changeChild";
  }
}
复制代码
child.component.html不用编写代码
我们第五个实验的效果是这样的

六、父组件调用@ViewChild()

这种父子组件之间的通讯方式也很容易理解,项目代码和第五个通讯方式差不多
1.app.component.html 
<p>{{title}}</p>
<p>{{data.title}}</p>
<child #data></child>
<button (click)="onclick()">点击</button><!--注意这里，跟第五个方法有些区别-->
2.app.component.ts
复制代码 
import { Component } from '@angular/core';
import { ViewChild } from '@angular/core';
import { ChildComponent } from './child/child.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title="app";
    @ViewChild(ChildComponent)//通过@ViewChild属性装饰器，将子组件CountdownTimerComponent注入到私有属性timerComponent里面，此处不能加分号。
    private child: ChildComponent;
    onclick(){
        this.child.click();
    }
}
复制代码
3.child.component.ts
复制代码 
import { Component } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent{
  title = 'child';
  click(){
      this.title="changeChild";
  }
}
复制代码
child.component.html也是不用编写代码，我们第六个实验的效果跟第五个是一样的，这里不再讲述。

七、父组件和子组件通过服务来通讯

这种服务通讯方式我在 一篇文章有详细地解析过。这个实验要在app.component.html加入新的文件Service.ts
1.app.component.html 
<p>{{title}}</p>
<button (click)="onclick()">点击</button>
<child></child>
2.app.component.ts
复制代码 
import { Component } from '@angular/core';
import { ChildComponent } from './child/child.component';
import { Service } from './Service';//导入服务

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title='app';
    constructor(public pService: Service) { //原来的写法是这样的pService = new Service();
     }
    onclick(){
        this.title = this.pService.getData();
        console.log(this.title);
    }
}
复制代码
3.child.component.ts
复制代码 
import { Component } from '@angular/core';
import { Service } from '../Service';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent{
  title = 'child';
  constructor(public pService: Service) {
    }
  onclick(){
    this.title = this.pService.getData();
  }
}
复制代码
4.child.component.html 
<p>{{title}}</p>
<button (click)="onclick()">点击</button>
app.component.html和child.component.html，app.component.ts和child.component.ts的代码几乎一样，目的是要展示出服务在父子组件甚至任何组件里面的使用
5.Service.ts
复制代码 
import {Injectable} from "@angular/core"

@Injectable()
export class Service {
  title='service';//公共变量
  getData() {//公共方法
    return this.title;
  }
}
复制代码
6.app.module.ts
复制代码 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ChildComponent } from './child/child.component';
import { Service } from './Service';//导入服务

@NgModule({
  declarations: [
    AppComponent,
    ChildComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [Service],//注册服务
  bootstrap: [AppComponent]
})
export class AppModule { }
复制代码
实验七的效果是这样的，在点击之前
点击之后

八、结语

至此七种父子组件之间的交互方式解析完毕，大家在不同的代码情况因地制宜，选择最合适的方式！

猜你喜欢

转载自blog.csdn.net/strong90/article/details/80491757
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022