云技术这篇“Angular组件间进行通信的方法有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Angular组件间进行通信的方法有哪些”文章吧。相当于你自定义了一个属性，通过组件的引入，将值传递给子组件。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']
})
exportclassChildComponentimplementsOnInit{
//输入装饰器
@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']
})
exportclassChildComponentimplementsOnInit{
//输出装饰器
@Output()
privatechildSayHi=newEventEmitter()
constructor(){}
ngOnInit():void{
this.childSayHi.免费云主机、域名emit('Myparents');
}
}
通过 emit 通知父组件，父组件对事件进行监听。
//parent.component.ts
import{Component,OnInit}from'@angular/core';
@Component({
selector:'app-communicate',
templateUrl:'./communicate.component.html',
styleUrls:['./communicate.component.scss']
})
exportclassCommunicateComponentimplementsOnInit{
publicmsg: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']
})
exportclassChildComponentimplementsOnInit{
//子组件的属性
publicchildMsg:string='Prop:messagefromchild'
constructor(){}
ngOnInit():void{
}
//子组件方法
publicchildSayHi():void{
console.log('Method:Iamyourchild.')
}
}
我们在父组件上设置子组件的引用标识 #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']
})
exportclassCommunicateComponentimplementsOnInit{
@ViewChild('childComponent')
childComponent!:ChildComponent;
constructor(){}
ngOnInit():void{
this.getChildPropAndMethod()
}
getChildPropAndMethod():void{
setTimeout(()=>{
console.log(this.childComponent.childMsg);//Prop:messagefromchild
this.childComponent.childSayHi();//Method:Iamyourchild.
},50)
}
}
这种方法有个限制?，就是子属性的修饰符需要是 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'
})
exportclassParentAndChildService{
privatesubject$:BehaviorSubject=newBehaviorSubject(null)
constructor(){}
//将其变成可观察
getMessage():Observable{
returnthis.subject$.asObservable()
}
setMessage(msg:string){
this.subject$.next(msg);
}
}
接着，我们在父子组件中引用，它们的信息是共享的。
//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']
})
exportclassCommunicateComponentimplementsOnInit,OnDestroy{
unsubscribe$:Subject=newSubject();
constructor(
privatereadonlyparentAndChildService:ParentAndChildService
){}
ngOnInit():void{
this.parentAndChildService.getMessage()
.pipe(
takeUntil(this.unsubscribe$)
)
.subscribe({
next:(msg:any)=>{
console.log('Parent:'+msg);
//刚进来打印Parent:null
//一秒后打印Parent:Jimmy
}
});
setTimeout(()=>{
this.parentAndChildService.setMessage('Jimmy');
},1000)
}
ngOnDestroy(){
//取消订阅
this.unsubscribe$.next(true);
this.unsubscribe$.complete();
}
}
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']
})
exportclassChildComponentimplementsOnInit{
constructor(
privateparentAndChildService:ParentAndChildService
){}
//为了更好理解，这里我移除了父组件的Subject
ngOnInit():void{
this.parentAndChildService.getMessage()
.subscribe({
next:(msg:any)=>{
console.log('Child:'+msg);
//刚进来打印Child:null
//一秒后打印Child:Jimmy
}
})
}
}
在父组件中，我们一秒钟之后更改值。所以在父子组件中，一进来就会打印 msg 的初始值 null，然后过了一秒钟之后，就会打印更改的值 Jimmy。同理，如果你在子组件中对服务的信息，在子组件打印相关的值的同时，在父组件也会打印。以上就是关于“Angular组件间进行通信的方法有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注云技术行业资讯频道。
今天小编给大家分享一下高级CSS技巧有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。1. 为什么需要精灵图？客户端要访问一个网页时，浏览器会…
主机管理平台有哪些？
企业网站主机，选云服务器还是虚拟主机？
域名注册申请，必须要实名吗？