十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇“Angular组件间进行通信的方法有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Angular组件间进行通信的方法有哪些”文章吧。
创新互联公司是一家专业提供黄陵企业网站建设,专注与网站建设、网站制作、H5开发、小程序制作等业务。10年已为黄陵众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
相当于你自定义了一个属性,通过组件的引入,将值传递给子组件。Show you the CODE
。
在父组件中调用子组件,这里命名一个 parentProp
的属性。
// child.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
// 输入装饰器
@Input()
parentProp!: string;
constructor() { }
ngOnInit(): void {
}
}
子组件接受父组件传入的变量 parentProp
,回填到页面。
Hello! {{ parentProp }}
通过 new EventEmitter()
将子组件的数据传递给父组件。
// child.component.ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
// 输出装饰器
@Output()
private childSayHi = new EventEmitter()
constructor() { }
ngOnInit(): void {
this.childSayHi.emit('My parents');
}
}
通过 emit
通知父组件,父组件对事件进行监听。
// parent.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-communicate',
templateUrl: './communicate.component.html',
styleUrls: ['./communicate.component.scss']
})
export class CommunicateComponent implements OnInit {
public msg:string = ''
constructor() { }
ngOnInit(): void {
}
fromChild(data: string) {
// 这里使用异步
setTimeout(() => {
this.msg = data
}, 50)
}
}
在父组件中,我们对 child
组件来的数据进行监听后,这里采用了 setTimeout
的异步操作。是因为我们在子组件中初始化后就进行了 emit
,这里的异步操作是防止 Race Condition
竞争出错。
我们还得在组件中添加 fromChild
这个方法,如下:
Hello! {{ msg }}
我们通过操纵引用的方式,获取子组件对象,然后对其属性和方法进行访问。
我们先设置子组件的演示内容:
// child.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
// 子组件的属性
public childMsg:string = 'Prop: message from child'
constructor() { }
ngOnInit(): void {
}
// 子组件方法
public childSayHi(): void {
console.log('Method: I am your child.')
}
}
我们在父组件上设置子组件的引用标识 #childComponent
:
之后在 javascript
文件上调用:
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChildComponent } from './components/child/child.component';
@Component({
selector: 'app-communicate',
templateUrl: './communicate.component.html',
styleUrls: ['./communicate.component.scss']
})
export class CommunicateComponent implements OnInit {
@ViewChild('childComponent')
childComponent!: ChildComponent;
constructor() { }
ngOnInit(): void {
this.getChildPropAndMethod()
}
getChildPropAndMethod(): void {
setTimeout(() => {
console.log(this.childComponent.childMsg); // Prop: message from child
this.childComponent.childSayHi(); // Method: I am your child.
}, 50)
}
}
这种方法有个限制?,就是子属性的修饰符需要是 public
,当是 protected
或者 private
的时候,会报错。你可以将子组件的修饰符更改下尝试。报错的原因如下:
类型 | 使用范围 |
---|---|
public | 允许在累的内外被调用,作用范围最广 |
protected | 允许在类内以及继承的子类中使用,作用范围适中 |
private | 允许在类内部中使用,作用范围最窄 |
我们结合 rxjs
来演示。
rxjs是使用 Observables
的响应式编程的库,它使编写异步或基于回调的代码更容易。
后期会有一篇文章记录
rxjs
,敬请期待
我们先来创建一个名为 parent-and-child
的服务。
// parent-and-child.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs'; // BehaviorSubject 有实时的作用,获取最新值
@Injectable({
providedIn: 'root'
})
export class ParentAndChildService {
private subject$: BehaviorSubject
接着,我们在父子组件中引用,它们的信息是共享的。
// parent.component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
// 引入服务
import { ParentAndChildService } from 'src/app/services/parent-and-child.service';
import { Subject } from 'rxjs'
import { takeUntil } from 'rxjs/operators'
@Component({
selector: 'app-communicate',
templateUrl: './communicate.component.html',
styleUrls: ['./communicate.component.scss']
})
export class CommunicateComponent implements OnInit, OnDestroy {
unsubscribe$: Subject
import { Component, OnInit } from '@angular/core';
import { ParentAndChildService } from 'src/app/services/parent-and-child.service';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
constructor(
private parentAndChildService: ParentAndChildService
) { }
// 为了更好理解,这里我移除了父组件的 Subject
ngOnInit(): void {
this.parentAndChildService.getMessage()
.subscribe({
next: (msg: any) => {
console.log('Child: '+msg);
// 刚进来打印 Child: null
// 一秒后打印 Child: Jimmy
}
})
}
}
在父组件中,我们一秒钟之后更改值。所以在父子组件中,一进来就会打印 msg
的初始值 null
,然后过了一秒钟之后,就会打印更改的值 Jimmy
。同理,如果你在子组件中对服务的信息,在子组件打印相关的值的同时,在父组件也会打印。
以上就是关于“Angular组件间进行通信的方法有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。