从另一个组件调用一个组件的功能的正确方法

Question

我有两个组成部分。

组件 1 是一个调用函数的 FAB 菜单图标小东西

@Component({
selector: 'app-contextualmenu',
templateUrl: './contextualmenu.component.html',
styleUrls: ['./contextualmenu.component.scss']
})
export class ContextualMenuComponent implements OnInit {
context: string;    

constructor(private ctxMenu: ContextualMenuSyncService, ) {
    ctxMenu.context$.subscribe(v => { this.context = v; });
}

ngOnInit() {}

add() {
    this.ctxMenu.add();
}
}

组件 2 是具有被调用函数的组件

@Component({
selector: 'app-sites',
templateUrl: './sites.component.html',
styleUrls: ['./sites.component.scss']
})
export class SitesComponent implements OnInit {
list: Site[];

constructor(private ctxMenu: ContextualMenuSyncService) {
    this.ctxMenu.sync("sites");
    this.ctxMenu.add = this.add;
}

ngOnInit() {   }

add() {       
    this.router.navigateByUrl("/newsite");
}
}

最后还有一个 ContextualMenuSyncService 充当两个组件之间的管道。

@Injectable()
export class ContextualMenuSyncService {
private context = new Subject<string>();
context$ = this.context.asObservable();

add: Function;

constructor() { }

sync(value: string) {
    this.context.next(value);
}
}

所以简而言之，我试图从 组件 1[=44= 的 add() 调用 组件 2 的 add() ]

根据我对这个主题的阅读，上面的共享服务是完成组件间通信的合适方式。

然而，我的问题是，当我调用 add() 时，它是在 ContextualMenuSyncService 上下文之外执行的。意思是 this 是 ContextualMenuSyncService 而不是 SitesComponent (Component 2) 这意味着我无法访问 SitesComponent (组件 2) 成员、注入、信息等

如何在第一个组件的上下文中从另一个组件调用一个组件的成员函数？

Answer 1

你会更像这样：

功能为运行的组件：

@Component({
selector: 'app-sites',
templateUrl: './sites.component.html',
styleUrls: ['./sites.component.scss']
})
export class SitesComponent implements OnInit, OnDestroy {
list: Site[];
private addSub;

constructor(private ctxMenu: ContextualMenuSyncService) {
    this.ctxMenu.sync("sites");
    this.addSub = this.ctxMenu.add$.subscribe(() => this.add());
}

ngOnInit() {   }

ngOnDestroy() { this.addSub.unsubscribe(); } // always unsubscribe

add() {       
    this.router.navigateByUrl("/newsite");
}
}

服务：

@Injectable()
export class ContextualMenuSyncService {
private context = new Subject<string>();
context$ = this.context.asObservable();

private addSource: Subject<any> = new Subject();
add$: Observable<any> = this.addSource.asObservable();
add() {
    this.addSource.next();
}

constructor() { }

sync(value: string) {
    this.context.next(value);
}
}

调用服务的函数没问题

Answer 2

您需要显式绑定 add 的 this 值才能获取组件 2 的 this 值。有几种方法可以做到这一点，但最简单和最受欢迎的方法是使用 箭头函数 ，就像在将 add 添加到 ctxMenu 时那样：

this.ctxMenu.add = () => this.add(); // maintains Component2's this

或者，您可以像这样使用 bind：

this.ctxMenu.add = this.add.bind(this); // maintains Component2's this

从另一个组件调用一个组件的功能的正确方法

Proper way to call a function of one component from another component

angular

angular5