Angular 从另一个组件调用函数

Angular 从另一个组件调用函数,angular,visible,custom-function,Angular,Visible,Custom Function,也许我的问题很简单,但我无法解决。 我有两个部分。第一, form.component.ts form.component.html 当我单独放置这个组件并触发按钮时,它工作正常。但是,当我在另一个组件中调用它时,该函数起作用,但显示不出现。我调用函数的另一个组件是 动态组件 dynamic.component.html 动作 我正在使用console.log(“表单显示”)测试该函数是否在form.component.ts中工作。这可以工作,但窗体不可见。我看不出有什么问题?谢谢您把form

也许我的问题很简单,但我无法解决。 我有两个部分。第一,

form.component.ts form.component.html 当我单独放置这个组件并触发按钮时,它工作正常。但是,当我在另一个组件中调用它时,该函数起作用,但显示不出现。我调用函数的另一个组件是

动态组件 dynamic.component.html
动作

我正在使用console.log(“表单显示”)测试该函数是否在form.component.ts中工作。这可以工作,但窗体不可见。我看不出有什么问题?谢谢

您把formComponent放在这里了吗
/dynamic.component.html
formComponent附加在布局上。有必要在这里说明吗?我应该怎么做?将
放在
KitAntdTableDynamicComponent
的模板中,我还将删除显示/隐藏子组件的逻辑,并在父组件中决定何时显示或隐藏子组件/formit给我:“'cui nt form'不是已知元素”
import { Component, Injectable } from '@angular/core'

@Injectable({
  providedIn: 'root',
})

@Component({
  selector: 'cui-nt-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss'],
})
export class NtFormComponent {

  showForm: boolean = false

  constructor() {
    document.addEventListener('keydown', this.handleKeyDownForm.bind(this), false)
  }

  public setVisibleForm() {
    console.log('Form Showing');
    this.showForm = true 
  }

  setHiddenForm() {
    this.showForm = false
  }

  handleKeyDownForm(event: any) {
    if (this.showForm) {
      const key = event.keyCode.toString()
      if (key === '27') {
        this.setHiddenForm()
      }
    }
  }
}
<div class="d-inline-block mr-4">
  <!-- <button nz-button (click)="setVisibleForm()" nzType="primary">Primary Buttonn</button> -->
  <div class="liveForm" [ngClass]="{'liveformVisible': showForm}">
    <button class="close" type="button" (click)="setHiddenForm()">
      <i class="icmn-cross"></i>
    </button>
    <h5>test form</h5>
  </div>
</div>
....
.liveformVisible {
  opacity: 1;
  visibility: visible;
}
....
import { Component, NgModule, OnInit, ViewChild } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { NtFormComponent } from 'src/app/components/layout/Forms/form.component'

@Component({
  selector: 'kit-antd-table-dynamic',
  templateUrl: './dynamic.component.html',
  styles: [
    `
      .components-table-demo-control-bar {
        margin-bottom: 12px;
      }

      .nz-form-item {
        margin-right: 16px;
        margin-bottom: 8px;
      }

    `,
  ],
})
export class KitAntdTableDynamicComponent implements OnInit {
  showForm: boolean = false

  constructor(
    private route: ActivatedRoute,
    private formComponent:NtFormComponent
     ){}
 ....    
  formVisible(){
    this.formComponent.setVisibleForm();
  }
 ....
} 
<a (click)="formVisible()">Action</a>