Angular中父子组件如何通过多种方式实现长距离参数传递？

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

本篇文章向家长介绍Angular中父子组件和子组件相互传参的方法。具有一定的参考价值，有需要的亲友可参考，希望对家长有所帮助。

【相关教程推荐：《Angular教程》】

一、父子组件

父子组件指的是在Angular中，一个组件作为父组件，另一个组件作为子组件，它们之间存在父子关系。父子组件之间可以通过以下方式传递数据：

1. 属性绑定：在父组件中，将需要传递的数据绑定到子组件的属性上。

2. 输入属性：在子组件中，定义一个输入属性，用于接收父组件传递的数据。

3. 事件绑定：在父组件中，通过事件绑定将数据传递给子组件。

4. 服务：通过Angular的服务（Service）来传递数据，实现父子组件之间的解耦。

二、子组件

子组件是Angular中的一种组件，它可以在父组件中使用，并接收来自父组件的数据。子组件的创建和使用方法如下：

1. 创建子组件：在Angular项目中，使用命令 `ng generate component 子组件名称` 创建子组件。

2. 使用子组件：在父组件的模板中，通过 `` 标签使用子组件。

3. 传递数据：在父组件中，将需要传递的数据绑定到子组件的属性或事件上。

通过以上方法，家长可以了解Angular中父子组件和子组件相互传参的基本方法。希望对家长有所帮助。

本篇文章给大家介绍一下Angular中父组件和子组件相互传参的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

一 ：父组件获取子组件的数据和方法

也就是说 子组件给父组件传数据和方法

通过ViewChild

演示例子：

父组件：news
子组件：header

假如子组件header有个run方法

run(){ console.log(‘我是header里面的run方法’); }

在父组件调用子组件header的run方法

1、在父组件中调用子组件，并给子组件定义一个名称

<app-header #header></app-header>

2、在父组件引入ViewChild

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

3、利用属性装饰器ViewChild 和刚才的子组件关联起来

@ViewChild(‘header’) Header:any;

4、调用子组件的方法

getChildRun(){ this.Header.run(); }

二：父组件给子组件传值-@input

演示例子：

父组件：home
子组件：header

父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件

所以在子组件中可以调用 父组件的方法

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

<app-header [title]="title" [homeWork]="homeWork" [homepage]='this'></app-header>

2、子组件引入 Input 模块

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

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

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

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

这是头部组件-- {{title}}

5、子组件中使用父组件的方法

总结：

父传子： @input

子传父：ViewChild

三、子组件通过@Output触发父组件的方法

演示例子：
父组件：news
子组件：footer

1、子组件引入 Output 和 EventEmitter

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

2、子组件中实例化 EventEmitter

@Output()
private outer=new EventEmitter();
/用 EventEmitter 和 output 装饰器配合使用 指定类型变量/

3、子组件通过 EventEmitter 对象 outer 实例广播数据

sendParent(){ this.outer.emit(‘msg from child’) }

4、父组件调用子组件的时候，定义接收事件 ,outer 就是子组件的 EventEmitter 对象 outer

文件：components\news\news.component.html

<app-footer (outer)=“getFooterRun(data)”>

5、父组件接收到数据会调用自己的 getFooterRun 方法，这个时候就能拿到子组件的数

文件：components\news\news.component.ts

//接收子组件传递过来的数据 getFooterRun(data){ console.log(data); }

五、非父子组件通讯

1、公共的服务
2、Localstorage(推荐)
3、Cookie

总结：

vue中 关于$emit的用法

1、父组件可以使用属性把数据传给子组件，子组件通过props接受。
2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn；

angular中 关于emit的用法

1、父组件可以使用属性把数据传给子组件,子组件通过@input接受。
2、子组件可以使用 Output 和 EventEmitter 触发父组件的自定义事件。

父组件

<app-footer (event)=“getFooterRun(data)”>

子组件

@Output() private event=new EventEmitter<string>(); /*用 EventEmitter 和 output 装饰器配合使用 <string>指定类型变量*/ sendParent(){ // outer 相当于是事件名称 this.event.emit(data) }

<button (event)=“sendParent()”>通过@Output给父组件广播数据

更多编程相关知识，请访问：编程视频！！

以上就是浅谈Angular中父子组件间相互传参的方法的详细内容，更多请关注自由互联其它相关文章！