Javascript 调用子组件的方法

我有一个嵌套的子组件，如下所示：

我的

appMain

组件需要调用子组件上的方法

---

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

父组件和子组件可以通过数据绑定进行通信

例如：

@组件({
选择器：'子组件'，
输入：['bar']，
模板：`{{bar}}在子级中，计数器{{n}`
})
类子组件{
构造函数（）{
这个。n=0；
}
公司（）{
这个.n++；
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`


调用子函数
更改父变量
`,
指令：[子组件]
})
类AppComponent{
构造函数（）{
this.bar='parent var'；
}
}
bootstrap（AppComponent）；

---

#f

创建对子组件的引用，可以在模板中使用，也可以传递给函数。来自父级的数据可以通过

[]

绑定传递。

您可以使用

@ViewChild('childComponent') child;

其中

childComponent

是一个模板变量

`

其中
ComponentType
是组件或指令的类型，然后在
ngAfterViewInit
或事件处理程序调用
child.someFunc（）
中

另请参见作为子组件

@Component({
    // configuration
    template: `{{data}}`,
    // more configuration
})
export class Son {

  data: number = 3;

  constructor() { }

  updateData(data:number) {
    this.data = data;
  }

}

@Component({
    // configuration
})
export class Parent {
  @ViewChild(Son) mySon: Son;

  incrementSonBy5() {
    this.mySon.updateData(this.mySon.data + 5);
  }
}

有父亲成分的

@Component({
    // configuration
    template: `{{data}}`,
    // more configuration
})
export class Son {

  data: number = 3;

  constructor() { }

  updateData(data:number) {
    this.data = data;
  }

}

@Component({
    // configuration
})
export class Parent {
  @ViewChild(Son) mySon: Son;

  incrementSonBy5() {
    this.mySon.updateData(this.mySon.data + 5);
  }
}

在父亲的模板中

<son></son>
<button (click)="incrementSonBy5()">Increment son by 5</button>


增加儿子5分

此解决方案仅适用于父模板中的一个
实例。如果您有多个实例，则只能在模板的第一个实例中使用。
访问子组件的最佳方法是

假设您的示例中有一个带有嵌套子组件的AppMainComponent

// app-main.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-main',
    template: `
        <child-component />
    `
})

export class AppMainComponent {}

您可以通过导入ChildComponent类、ViewChild decorator并将组件的类作为查询传递给它来实现这一点。这样，您就可以访问存储在自定义变量中的ChildComponent接口。以下是一个例子：

// app-main.component.ts
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './components/child/child.component';

@Component({
    selector: 'app-main',
    template: `
        <child-component />
    `
})

class ChildComponent {
    @ViewChild(ChildComponent)
    child: ChildComponent;

    clearChild() {
        this.child.clear();
    }
}

//app-main.component.ts
从“@angular/core”导入{Component，ViewChild}；
从“./components/child/child.component”导入{ChildComponent}；
@组成部分({
选择器：'应用程序主'，
模板：`
`
})
类子组件{
@ViewChild（ChildComponent）
child：ChildComponent；
clearChild（）{
这个.child.clear（）；
}
}

注意！子视图仅在完成后才可用

Angular初始化零部件视图和子视图后响应。
在第一个ngAfterContentChecked（）之后调用一次。
只有组件的挂钩

若你们想自动执行这个方法，你们需要在这个生命周期钩子中执行它

您还可以通过decorator获得一系列子组件

import { Component, ViewChildren, QueryList } from '@angular/core';
import { ChildComponent } from './components/child/child.component';

...

@ViewChildren(ChildComponent)
children: QueryList<ChildComponent>;

从'@angular/core'导入{Component，ViewChildren，QueryList}；
从“./components/child/child.component”导入{ChildComponent}；
...
@ViewChildren（ChildComponent）
儿童：QueryList；

QueryList可能非常有用，例如，您可以订阅子项更改

也可以通过ViewChild装饰器创建和访问它们。
我做错了什么。当我声明像#f这样的变量时，即#f引用dom元素，当我声明f.someMethodCall（）时，我会得到一个错误，因为该元素上没有定义该方法。你知道怎么回事吗？@PerHornshøj-Schierbeck，如果元素上没有组件/指令，则本地模板变量（例如，
#f
）引用元素本身。也许这就是你的问题。@PerHornshøj-Schierbeck变量在使用前必须声明（你不能像模板中的最后一个那样放置示例中的
子组件
），我认为语法是
@ViewChild（ComponentName）child和根据它是不可用的，直到
ngAfterViewInit（）
生命周期挂钩。我尝试了它。传递字符串时，它将查找具有此名称的模板变量，否则将查找传递类型的组件或指令。文档中的“选择器”有点误导。谢谢更新。我查看了，它说“支持与QueryMetadata相同的查询参数，但子体除外。”解释了支持的所有不同类型的“选择器”。（现在发现这些东西真是太痛苦了。）你可以用
@ViewChildren（）
把它们都弄到手。这让我上当了！我的intellisense不会检测到孩子，这让我相信它是不可见的+1.
import { Component, ViewChildren, QueryList } from '@angular/core';
import { ChildComponent } from './components/child/child.component';

...

@ViewChildren(ChildComponent)
children: QueryList<ChildComponent>;