我有两个组件A和B,其中组件A包含一个按钮。我希望当用户点击这个按钮时,在组件B上启动一个功能
<A></A>
<router-outlet></router-outlet>
组件 B 使用路由渲染。我正在考虑使用带有可观察布尔值的服务,该布尔值指示是否单击了 A 中的按钮。这是实现它的正确方法吗?
停止使用服务进行组件交互!!!
服务在编程中是一个无状态的概念,它只能依靠输入和其他注入的服务来产生它的输出。在服务内部存储数据(虽然可行)是反模式的(因为您的服务现在是有状态的)。
您可以通过绑定组件的@Inapp()和@Outapp()来实现您需要的内容:
//main container html
<A></A>
<router-outlet (activate)="onRouterOutletActivate($event)"></router-outlet>
//main container ts
@ViewChild(ComponentA, {static: false}) a : ComponentA;
onRouterOutletActivate(event: ContainerOfB): void {
this.activeRouteComponent = event;
// make sure doStuff method is defined public in ComponentB
// clickOutput is an @Output() on ComponentA which propagates click event
this.a.clickOutput.subscribe(() => this.activeRouteComponent.b.doStuff());
}
//ContainerOfB, the container that has B in it
@ViewChild(ComponentB, {static: false}) b : ComponentB;
//ComponentA html
<button (click)="callback()">button</button>
//ComponentA ts
@Output() clickOutput: EventEmitter<void> = new EventEmitter<void>()
callback() { this.clickOutput.emit(); }
您还将实现异步性和响应性,通过在 Angular 的核心中拥有 rxjs 来强调这一点(而使用服务方法则不会)。
我知道组件通信的共享服务没有上面的方法复杂,但是仅仅因为它有效,并不意味着你应该这样做。如果你被锁在奔驰外面,你宁愿做什么:打碎窗户玻璃打开门,或者打电话给锁匠过来打开门。
p.s. Angular是dope因此比喻(奔驰)
您必须使用服务在两个组件之间进行通信。
请参阅 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service
您的服务具有属性事件。因此,组件 A 可以发出事件,组件 B 可以订阅它。
使用RxJS发出和订阅您的事件。
如果我的回答不能让你满意。请告诉我,我会努力的。
共享服务是非相关组件之间通信的一种常见方式。您的组件需要使用服务的单个实例,因此请确保它是在根级别提供的。
使用BehaviorSubject作为数据委托的示例:
共享服务:
@Injectable()
export class SharedService {
isVisibleSource: BehaviorSubject<boolean> = new BehaviorSubject(false);
constructor() { }
}
组件1:
export class Component1 {
isVisible = false;
constructor(private sharedService: SharedService) { }
onClick(): void {
this.isVisible = !this.isVisible;
this.sharedService.isVisibleSource.next(this.isVisible);
}
}
第2部分:
export class Component2 {
constructor(private sharedService: SharedService) { }
ngOnInit(): void {
this.sharedService.isVisibleSource.subscribe((isVisible) => {
console.log('isVisible: ', isVisible); // => true/false
});
}
}
值得一提的是,订阅时的< code>BehaviorSubject返回它保存的最后一个值,因此上面示例中的组件将在实例化后立即用最新的值进行更新。
行为主题
还允许在不订阅的情况下获取其最新值:
this.sharedService.isVisibleSource.getValue(); // => true/false
我正在使用angular2开发一个应用程序。我有一个场景,需要在路由时(使用router.navigate())将复杂的数据(对象数组)从一个组件传递到另一个组件(它们不是父子关系,而是两个独立的组件)。我在谷歌上搜索过,大多数结果描述了父子组件的场景。我浏览了结果,找到了这些传递数据的方法。 1)创建共享服务2)通过路由参数 第二种方法适合我(尽管我不喜欢上面解释的复杂数据)。我无法使用共享服务
本文向大家介绍详解Angular2组件之间如何通信,包括了详解Angular2组件之间如何通信的使用技巧和注意事项,需要的朋友参考一下 组件之间的共享可以有好几种方式 父->子 input 方式 子->父 output 方式 子获得父实例 如果不了解forwardRef用处的的可以看 #11 @Host 表示这个Injector必须是host element在这里可以理解为 parent 父获得子
我们有一个侦听事件的微服务,现在让我们调用这个。它侦听RabbitMQ上的审计事件()。任何想要调用的人都需要创建并激发。我们在一个公共模块中共享了pojo,因此可以共享它。 注意,最后一部分需要是同步的,这意味着如果数据库保存失败,我们不想发送电子邮件或类似的东西。目前,这是通过从中的事件处理程序中调用commandGateway来完成的,从调用commandGateway是否正确,如果不正确,
我目前正在考虑构建一个简单的MMORPG。 这个想法是拥有一个 .NET 服务器和可下载的客户端应用程序。 组织客户端-服务器交互的最简单而有效的方法是什么? 我想到了一个网络服务,但只要客户端必须快速执行许多游戏操作(例如移动、拾取物品、攻击其他玩家等),它看起来效率很低。 创建自定义通信协议是一项非常复杂的任务。 是否存在现成的解决方案?
我正在写一个微服务的应用程序,由Spring Boot和Spring云。我有五个模块 API网关(基于Spring云网关spect) Discovery-Server(基于Spring云NetflixEureka服务发现) Microservice-A(它是一个包含我们业务的Spring引导应用程序) Microservice-B(它是一个包含我们业务的Spring引导应用程序) Microser