相关疑难解决方法(0)

我有一个嵌套的子组件,如下所示:

<app-main>
    <child-component />
</app-main>

我的appMain组件需要在子组件上调用方法.

如何在子组件上调用方法？

可以通过@Input将数据从父节点发送给子节点,或者通过@Output从子节点调用父节点上的方法,但是我想完全相反,这就是调用方法来自父母的孩子.基本上是这样的:

@Component({
  selector: 'parent',
  directives: [Child],
  template: `
<child
  [fn]="parentFn"
></child>
`
})
class Parent {
  constructor() {
    this.parentFn()
  }
  parentFn() {
    console.log('Parent triggering')
  }
}

和孩子:

@Component({
  selector: 'child',
  template: `...`
})
class Child {
  @Input()
  fn() {
    console.log('triggered from the parent')
  }

  constructor() {}
}

背景是一种"获取"请求,即从孩子获得最新状态.

现在我知道我可以通过服务和Subject/Observable实现这一点,但我想知道是否有更直接的东西？

我想知道最好的方法,如果有不同的方法.我正在尝试从其父组件中调用子组件中的函数.所以,如果我有:

<parent>
    <child></child>
</parent>

...并且child具有调用的函数show()或者hide(),如何调用其中任何一个parent？

我正在学习/研究Angular项目,我已经做了很多,我尝试以"正确的方式"做事,所以现在我想做的是:

我想从子组件到父组件获取变量(输出),但我不想使用输出,我不想听它,我想在父母需要的时候得到它,像child.getVariable()我这样的东西我发现一个帖子说我应该使用childview,但问题与我的不一样,所以我想知道使用childview从子组件获取数据是一个好习惯吗？

设计人员的 UI 模拟要求我将全局搜索过滤器移到 p 表之外，但我不确定如何执行此操作，或者是否可能？有没有人有做类似事情的经验？我可以严格使用 CSS 样式来做到这一点，同时保持针对不同屏幕尺寸的响应式布局吗？

<p-table #dt [value]="tags" [paginator]="true" [rows]="25" [columns]="cols" [resizableColumns]="true" [globalFilterFields]="['vendor']">
  <ng-template pTemplate="caption">
    <div style="text-align: right; overflow-x: hidden;">
      <p class="wrapper"><input type="text" class="search-vendors" pInputText size="50" placeholder="Search Vendors" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto"></p>
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th class="{{col.class}}" *ngFor="let col of columns" [pSortableColumn]="col.field">
        <p-sortIcon [field]="col.field" *ngIf="col.field == 'fieldThree' || col.field == 'fieldOne' || col.field == 'fieldTwo' "></p-sortIcon>
        {{col.header}}
        <fa *ngIf="col.field == 'fieldThree' || col.field == 'fieldTwo'" name="info-circle" pTooltip="{{col.tooltip}}" tooltipPosition="right" showDelay="1000" hideDelay="500"></fa>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData …

父组件

import { Component } from '@angular/core';
import { ChildComponent }  from './notify.component';

@Component({
    selector: 'my-app',
    template:
    `
    <button (click)="submit()">Call Child Component Method</button>
    `
})
export class AppComponent {
    constructor(private childComp: ChildComponent) { 
    }

    submit(): void {
        // execute child component method
        // This line is compiled properly but at the run time it gives me error related to the static injector## Heading ##
        childComp.callMethod();
    }
}

子组件

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'child',
    template: '<h3>Child …

就是看不懂

单击父组件中的按钮时如何调用子组件中的函数？