Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
Angular之父组件给子组件传值
父组件给子组件传值 格式
假如定义一个父组件为home 子组件为header代码如下:
父组件html代码:
<app-header [msg]="msg" [run]="run"></app-header>
<br>
------------------
<br>
我是首页组件
父组件component代码:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
public msg:string="这是父组件的msg";
ngOnInit(): void {
}
public run(){
alert("这是父组件的run方法");
}
}
子组件html代码:
<header>我是头部</header>
<button (click)="getrun()">获取父组件的方法</button>
<button (click)="getmsg()">获取子组件的方法</button>
子组件component代码:
import { Component, OnInit,Input } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor() { }
@Input() msg:any;
@Input() run:any;
ngOnInit(): void {
}
public getmsg(){
alert(this.msg)
}
public getrun(){
this.run();
}
}
注意:
1.子组件接收父组件传递值需要和父组件的[名字]一致,
2.子组件接收值需要在component中引入Input模块
3.父组件在传递方法不需要加()
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/197202.html原文链接：https://javaforall.net
