Angular父组件传值给子组件

(传的值可以是属性,方法等)
1.在父组件news.component.ts里的:(传值方式与vue有点类似)

export class NewComponent implements OnInit {
	//在这里定义和获取要传递的值,例如:
	public name = '我是发哥';
	public age = 'age';
	run (){
		alert("父组件传给子组件的run方法")
	}
}

2.在父组件news.component.html里的子组件标签里绑定属性:

//有一个是自定义名字的
    <div class="news">
    <app-header [title]="title" [name]="name" [run]="run"></app-header>
    </div>

3.在子组件news.component.ts里接收父组件传过来的值:

3-1.需导入Input:
	 import { Component, OnInit ,Input} from '@angular/core';
	 
3-2.通过 @Input()接收传过来的值,可以说明值是什么类型
    @Input() title;
    @Input() name:string;
     @Input() run; //run方法
    
3-3.然后可在news.component.html里显示父组件传过来的值:
 	<p>tilte--{{title}}</p>
 	<p>name--{{name}}</p>
 	<button (click)="run()">执行父组件传过来的run方法</button>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值