Angular组件间通信方式有哪些？父子组件传值原理详解？

本文共计1011个文字，预计阅读时间需要5分钟。

Angular父子组件间如何进行通信？本篇文章为大家介绍一种Angular父子组件传递值的方式。

通过Input和Output传值：

父组件：在父组件的HTML模板中，使用方括号语法绑定子组件的属性，并传递相应的值。

子组件：在子组件的TypeScript文件中，定义一个Input属性，并在组件类中声明该属性。

typescript// 子组件import { Component, Input } from '@angular/core';

@Component({ selector: 'app-child', template: `{{ name }}`})export class ChildComponent { @Input() name: string;}

父组件：在父组件的TypeScript文件中，修改或更新传递给子组件的值。

typescript// 父组件import { Component } from '@angular/core';

@Component({ selector: 'app-parent', template: ``, providers: []})export class ParentComponent { parentName: string='初始值';

changeName(newName: string) { this.parentName=newName; }}

子组件：在子组件的TypeScript文件中，定义一个Output属性，并在组件类中声明该属性。