Angular父组件调用子组件里面的方法

简介: Angular父组件调用子组件里面的方法

child.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent {
  // 子组件的方法
  alert(d: any) {
    alert(d);
  }
}

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './com/child/child.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @ViewChild('child') child: ChildComponent | undefined;//获取子组件对象
  childAlert(text: any) {
    this.child?.alert(text);//父组件调用子组件的方法
  }
}

app.component.html

<app-child #child></app-child>
<button (click)="childAlert('调用子组件的方法')">调用子组件的方法</button>


相关文章
|
6月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
JavaScript
angular从iframe里面调用父页面的controller的方法
angular从iframe里面调用父页面的controller的方法
|
存储 前端开发 数据库
Angular-checked方法使用
Angular-checked方法使用
109 0
Angular-checked方法使用
Angular4总结(五)—— 父子组件通信,钩子方法
组件和组件之间一定得是松耦合的这样可重用性才高,想象一下这样的场景,A和B两个兄弟组件,但是A调用B组件的一个方法,那么这两个组件就紧密的联系在了一起,这其实是并不可取的。 组件我们应该看作是一个黑盒,组件只需要"输入"和"输出"的功能就行,组件并不关心到底是谁给他输入的,也不关心他会输出给谁。
1487 0
Angular访问WebApi出现options方法
解决方案: 解决跨域: image.
910 0
|
3月前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `&lt;p:inputText&gt;` 和 `&lt;p:calendar&gt;` 等组件创建用户表单,并用 `&lt;p:dataTable&gt;` 展示数据集合,提升 JSF 应用的易用性和开发效率。
55 0