要解决Angular组件的兄弟组件调用服务中的函数并进行监视但不起作用的问题,可以按照以下步骤进行操作:
import { Injectable } from '@angular/core';
@Injectable()
export class SharedService {
sharedFunction() {
// 在这里编写要共享的函数逻辑
}
}
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';
@Component({
selector: 'app-component-a',
templateUrl: './component-a.component.html',
styleUrls: ['./component-a.component.css']
})
export class ComponentAComponent implements OnInit {
constructor(private sharedService: SharedService) { }
ngOnInit() {
this.sharedService.sharedFunction(); // 调用共享服务中的函数
// 监视共享服务中的某个属性或函数的变化
this.sharedService.someProperty.subscribe(value => {
// 做出相应的响应
});
}
}
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';
@Component({
selector: 'app-component-b',
templateUrl: './component-b.component.html',
styleUrls: ['./component-b.component.css']
})
export class ComponentBComponent implements OnInit {
constructor(private sharedService: SharedService) { }
ngOnInit() {
this.sharedService.sharedFunction(); // 调用共享服务中的函数
// 监视共享服务中的某个属性或函数的变化
this.sharedService.someProperty.subscribe(value => {
// 做出相应的响应
});
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComponentAComponent } from './component-a/component-a.component';
import { ComponentBComponent } from './component-b/component-b.component';
import { SharedService } from './shared.service';
@NgModule({
declarations: [ComponentAComponent, ComponentBComponent],
imports: [
CommonModule
],
providers: [SharedService] // 将共享服务添加到providers数组中
})
export class MyModule { }
通过以上步骤,兄弟组件就可以通过注入共享服务,并调用其中的函数,以及使用监视器来监视共享服务中的某个属性或函数。