Angular2-使用服务的组件之间的交互

Question

我有两个组件A和B，其中组件A包含一个按钮。我希望当用户点击这个按钮时，在组件B上启动一个功能

<A></A>
<router-outlet></router-outlet>

组件 B 使用路由渲染。我正在考虑使用带有可观察布尔值的服务，该布尔值指示是否单击了 A 中的按钮。这是实现它的正确方法吗？

Answer 1

停止使用服务进行组件交互!!!

服务在编程中是一个无状态的概念，它只能依靠输入和其他注入的服务来产生它的输出。在服务内部存储数据(虽然可行)是反模式的(因为您的服务现在是有状态的)。

您可以通过绑定组件的@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因此比喻(奔驰)

Answer 2

您必须使用服务在两个组件之间进行通信。

请参阅 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

您的服务具有属性事件。因此，组件 A 可以发出事件，组件 B 可以订阅它。

使用RxJS发出和订阅您的事件。

如果我的回答不能让你满意。请告诉我，我会努力的。

Answer 3

共享服务是非相关组件之间通信的一种常见方式。您的组件需要使用服务的单个实例，因此请确保它是在根级别提供的。

使用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