在一个组件中从另一个组件调用一个函数。

19 浏览
0 Comments

在一个组件中从另一个组件调用一个函数。

在Angular2中，假设我有一个组件component1（将其用作左侧面板导航器）和一个组件component2。这两个组件彼此之间没有关联（兄弟、父子关系等）。

如何从component2中调用component1中的一个函数？

在这里我不能使用事件绑定。

0

2 答案

0 Comments

在Angular中，共享服务是组件之间通信的常用方式。为了确保服务的单例实例被使用，需要在根级别提供该服务。

共享服务的代码如下：

export class SharedService {
    componentOneFn: Function;
    constructor() { }
}

组件一的代码如下：

export class ComponentOne {
    name: string = 'Component one';
    constructor(private sharedService: SharedService) {
        this.sharedService.componentOneFn = this.sayHello;
    }
    sayHello(callerName: string): void {
        console.log(`Hello from ${this.name}. ${callerName} just called me!`);
    }
}

组件二的代码如下：

export class ComponentTwo {
    name: string = 'Component two';
    constructor(private sharedService: SharedService) {
        if(this.sharedService.componentOneFn) {
            this.sharedService.componentOneFn(this.name); 
            // => Hello from Component one. Component two just called me!
        }
    }
}

以上代码中，ComponentTwo组件通过SharedService调用了ComponentOne组件的sayHello方法，并成功输出了结果。

希望这篇文章对您有所帮助！

0
0 Comments

在Angular中，如果我们想要在一个组件中调用另一个组件中的函数，我们可以使用Angular的BehaviorSubject来实现。下面是一个示例代码，展示了如何使用BehaviorSubject来在不相关的组件之间进行通信。

首先，我们需要创建一个服务文件，用于存储共享的数据和函数。在这个服务文件中，我们导入了必要的依赖，并创建了一个BehaviorSubject来存储数据。然后，我们将这个BehaviorSubject转换为一个Observable，以便可以在其他组件中订阅它。最后，我们定义了一个更新数据的函数，当调用这个函数时，它会将数据发送给BehaviorSubject。

接下来，我们需要在第一个组件中调用这个更新数据的函数。在这个组件的构造函数中，我们注入了上面创建的服务文件。然后，我们可以在需要的时候调用服务文件中的函数来更新数据。

最后，我们需要在第二个组件中订阅这个共享的数据。在这个组件的构造函数中，我们同样注入了上面创建的服务文件。然后，在ngOnInit函数中，我们订阅了共享的数据，并定义了一个回调函数来处理数据的变化。

通过以上的方法，我们可以在不相关的组件之间轻松地调用函数和共享数据。

然而需要注意的是，上述代码中的订阅操作是在ngOnInit函数中进行的。这意味着这个订阅只会发生一次，而不会在组件之间切换时重复进行。如果需要在每次切换组件时都进行订阅操作，可以将订阅操作放在其他生命周期钩子函数中。

0