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 是具有CALLED

功能的组件

@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 的<{1}}中调用组件2 的add()

根据我在此主题上所阅读的内容，上述共享服务是实现组件间通信的适当方式。

我的问题是，当我调用add()时，它正在add()上下文中执行。这意味着ContextualMenuSyncService为this而非ContextualMenuSyncService（组件2 ），这意味着我无法访问SitesComponent（组件2 < / strong>）成员，注入，信息等

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

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

您需要明确绑定this的{{1}}值才能获得组件2的add值。有几种方法可以做到这一点，但最简单和最受欢迎的方法是在向this添加add时使用箭头功能：

ctxMenu

或者，您可以像这样使用this.ctxMenu.add = () => this.add(); // maintains Component2's this：

bind

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

2 个答案: