如何在Angular 9中从父组件与子组件进行通信？

Angular使组件之间的通信非常容易。在本文中，我们将学习如何从父组件与子组件进行通信。

方法：

• 让我们创建两个组件：
  1. 父母
  2. 孩子
• 在父组件中，声明要在子组件中接收的属性，例如“ ParentId”。
• 在将子组件包含在父组件中的同时，使用属性绑定将“ ParentId”属性绑定到子组件。

• 现在在子组件中，从@ angular / core导入Input并创建一个由@input装饰器修饰的属性，以从父组件接收’ParentId’。属性名称应与用于绑定“ ParentId”属性(即“ id”)的名称相同。

• “ ParentId”将作为“ id”在子组件中成功接收。

例子：

• 在此示例中，我们将创建一个属性'ParentId'并将其接收到子组件中。
  让我们为父组件编写代码。

  import { Component } from '@angular/core';
    
  @Component({
    selector: 'app-root',
    
  // code for parent component view.
    
    template:`
    
  
    
  
      parent component - {{parentid}}
    
    
    
  // Bind the ParentId to child component.
    
    
    `,
    styleUrls: []
  })
  export class AppComponent {
    
  // This property is to be sent to the child component.
    
  parentid: number = 1;
    
  }
  

• 现在编写子组件的代码

  import { Component, OnInit, Input} from '@angular/core';
    
  @Component({
    selector: 'child',
    template: `
    
  
    
  child component
    
  // property successfully received from the parent component.
    
    parent id is {{id}}
    
    `,
    styles: []
  })
  export class TestComponent implements OnInit {
    
  // @input decorator used to fetch the 
  // property from the parent component.
    
    @Input()
    id: number;
      
    ngOnInit(): void {
    }
    
  }
  

输出：