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

Question

我有两个组件 A 和 B，其中组件 A 包含一个按钮。我希望当用户点击这个按钮时，在组件 B 上触发一个函数

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

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

Answer 1

共享服务是非相关组件之间的一种通用通信方式。 您的组件需要 use a single instance of the service ，因此请确保它是在根级别提供的。

使用 BehaviorSubject as a data delegate 的示例:

共享服务:

@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
        });
    }
}

值得一提的是，订阅后的 BehaviorSubject 会返回它持有的最后一个值，因此上例中的组件将在实例化后立即更新为最新值。

BehaviorSubject 还允许在不订阅它的情况下获取其最新值:

this.sharedService.isVisibleSource.getValue(); // => true/false