angular中父组件给子组件传值[emailprotected]

发布时间：2020-12-17 17:44:41 所属栏目：安全来源：网络整理

导读：1. 父组件调用子组件的时候传入数据 app-header [msg]="msg"/app-header 2. 子组件引入 Input 模块 import { Component,OnInit,Input } from ‘@angular/core‘; 3. 子组件中 @Input 接收父组件传过来的数据 export class HeaderComponent implements OnInit

1. 父组件调用子组件的时候传入数据

<app-header [msg]="msg"></app-header>

2. 子组件引入 Input 模块

import { Component,OnInit,Input } from ‘@angular/core‘;

3. 子组件中 @Input 接收父组件传过来的数据

export class HeaderComponent implements OnInit {
  @Input() msg:string
  constructor() { }
  ngOnInit() {
  }
}

4. 子组件中使用父组件的数据

h2>这是头部组件--{{msg}}</h2>

注意：不要在app跟组件里演示，会报错

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!