当 Com1 和 Com2 是同级时，如果触发功能，则类型 'parentCom' 上不存在属性 'childCom1'

问题描述

我想从childCom2触发一个childCom1的函数。 childCom1 和 childCom2 是兄弟姐妹。为此，我使用了这个：How to call another components function in angular2（第一个答案）。

但是在我的父组件 HTML 中，childCom2 无法识别 childCom1（由我的 IDE 看到）。我在编译时遇到以下错误：Property 'childCom1' does not exist on type 'parentCom'

我得到以下代码

parentCom

<div class="row">
  <div class="col-2">
    <app-childCom2 (myEvent)="childCom1.function()">
    </app-childCom2>
  </div>

  <div class="col-5">
    <div class="card">
      <div class="card-header">
        Data Frame
      </div>
      <div class="card-body" *ngIf="this.jsonParameteRSService.isspecificationFileLoaded">
        <app-childCom1 #childCom1></app-childCom1>
      </div>
    </div>
  </div>
</div>

childCom2

@Component({
  selector: 'app-childCom2',templateUrl: './childCom2.component.html',styleUrls: ['./childCom2.component.css']
})
export class childCom2 implements OnInit {
  opened = true;
  @Output() myEvent = new EventEmitter();

  constructor() { }

  ngOnInit(): void {
  }

  function($event) {
    this.myEvent.emit($event);
  }
}

解决方法

这是由 *ngIf 引起的。我删除了 *ngIf 字段并将其写入特定组件。