Question

我想从另一个组件调用一个子组件具有的方法，该组件是同一父组件的子组件，但级别较低。示意性地看到：

            |--Child B
 Father A---|
            |--Child C---|--Child D

A是每个人的父亲，并且有两个孩子B和C。C也是D的父亲。

在我的Angular应用程序中，组件B有一个地图实例，并具有管理该地图的功能。 C是一个路由器组件，它会根据应用程序更改D组件。

组件A

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

}

组件A的HTML

<ng-container>
   <mat-sidenav-container> 
      <mat-sidenav>
         <!--Component C-->
          <router-outlet></router-outlet>
      </mat-sidenav>
      <mat-sidenav-content >
        <!--Component B-->
        <app-map></app-map>
      </mat-sidenav-content>
   </mat-sidenav-container>
</ng-container>

组件B

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})


    export class MapComponent implements OnInit {
      ngOnInit(){...}
      drawWMSLayer(layerName:string){...}
      deleteWMSLayer(){...}
      drawCoordinates(coordinates:any){...}
      obtainIDENAMap(){...}
      //......//
    }

组件B的HTML

<div id="map" class="map"></div> <!--Openlayers map-->

组件C

const routes: Routes = [
  { path: '', redirectTo: '/inicio', pathMatch: 'full' },
  { path: 'inicio', component: PaginaInicioComponent },
  { path: 'edificios', component: EdificiosComponent },
  { path: 'parkings', component: ParkingsComponent },
  //..........//
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

组件D由路由器更改（其中之一）

@Component({
  selector: 'app-edificios',
  templateUrl: './edificios.component.html',
  styleUrls: ['./edificios.component.css']
})
export class EdificiosComponent implements OnInit {
  //........//
 /* I would like to call MapComponent functions from here */
}

组件B始终相同，并且仅通过其功能修改其属性的值。

这是一个“ Google Maps type”应用程序，其中的地图相同，并且会根据您调用的功能更改其外观。

Answer 1

由于这是遵循不同的层次结构，因此事情也可以进一步嵌套，因此建议使用服务来处理案例。

class MyMapService {
  methodCallSource = new BehaviorSubject<{method: string, params: any}>(null);
  methodCall$: Observable<{method: string, params: any}>;

  constructor() {
    this.methodCall$ = this.methodCallSource.asObservable();
  }
}

class ComponentB {
  mapMethodCallSub;
  constructor () {
    private myMapService: MyMapService
  }

  ngOnInit() {
    this.mapMethodCallSub = this.myMapService.methodCall$
      .subscribe((callArgs) => {
        const {method, params} = callArgs;
        switch(method) {
          case 'doSomething':
            this.doSomething(params);
            break;
          case 'doSomethingElse':
            this.doSomething(params);
            break;
        }
      })
  }

  ngOnDestroy() {
    this.mapMethodCallSub.unsubscribe();
  }
  doSomething({param1}) { // keep your params as objects

  }
  doSomethingElse({param1, param2}) { // keep your params as objects

  }
}

class ComponentD {
  constructor () {
    private myMapService: MyMapService
  }

  someTrigger() {
    this.myMapService.methodCallSource.next('doSomething', {param1: 'Ahsan'});
  }

  someActionTest() {
    this.myMapService.methodCallSource.next('doSomethingElse', {param1: 'Satellite', param2: 'Texas'});
  }
}

从另一个孩子Angular调用孩子的函数

1 个答案: