@Input 父传子

说明：@input用来把一个变量，标记为标签的属性，用以输入数据

• 父组件定义一个参数变量 父组件HTML实现绑定

<!--给子页面传送数据 [子页面用以接收数据的参数] = “父页面用以发送数据的参数”-->
<app-child [childReceiveData]="fatherPostData"></app-child>

父组件js定义数据

  //定义父页面需要往子页面传送的数据
  public fatherPostData:string = "我是父页面数据";

• 子组件使用@input
  子页面设置展示接收到的数据

<div>{{childReceiveData}}</div>

子页面设置接收参数

//导入@Input装饰器
import { Component, OnInit ,Input } from '@angular/core';
//把childReceiveData标记为可输入的属性
export class ChildComponent implements OnInit {
  //@Input 应用:把childReceiveData标记为标签的属性
  @Input() public childReceiveData:string;
  
  constructor() { }
  ngOnInit(): void {}        
}

--Posted from Rpc

来源：oschina

链接：https://my.oschina.net/Dir/blog/3215345