angular框架如何实现父子组件传值、非父子组件传值

大家好，又见面了，我是你们的朋友全栈君。

1.理解父子组件、非父子组件

什么是父子组件？
组件的父子关系是相对来说的，即在一个A组件中嵌入了B组件，那么在这一层关系中，A组件是B组件的父组件，B组件是A组件的子组件。
看下面两幅图即可理解：
app.component.html与普通组件的关系：

普通组件与普通组件：

现在应该知道父子组件是什么关系了，关键看谁嵌入了谁那里。

父子组件可以相互获取对方组件的数据以及方法。

2.父组件给子组件传值- -@input

父组件不仅可以给子组件传简单的数据，还可以把它自己的方法以及整个父组件传给子组件，通过HTML模板实现传值。
看看操作步骤：

1. 在父组件中给子组件的HTML传入“msg”信息：

假设将shopping组件嵌入到news组件中，则shopping是子组件
下面给子组件通过“模板属性”方式传递数据:

<app-shopping [msg]="message"></app-shopping>

    [msg]中的属性名随意定义，message是父组件中定义的一个变量或方法

2. 子组件引入@input模块：

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

	即多引入了Input

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

export class newsComponent implements OnInit{ 
   
		@Input msg:string
}

	即在组件的类中用Input修饰符接收数据

以上三步就完成了父组件给子组件传递数据。

下面看实际操作：

第一步：在父组件声明即将传递给子组件的message字符串

第二部：在父组件模块中引入子组件

第三部：在子组件ts文件中接收父组件传来的数据

查看浏览器是否传值成功：

父组件给子组件传递方法也是这样。

假设父组件有一个方法：
setChild(){ 
   

}

则在子组件模板这样绑定：
<app-shopping [func]="setChild"> </app-shopping>

注意： 如果传递的值过多可以用一个属性来包装着。

3.父组件通过@ViewChild主动获取子组件的数据和方法

在angular也提供了一个@Output修饰器来实现子组件给父组件传值，但是这个方法是较复杂的，我们使用另一种@ViewChild方法来实现。

1. 调用子组件，给子组件定义一个名称

<app-shopping #msg> </app-shopping>

#号后面加一个变量名，组成模板变量

2. 在父组件中引入viewChild：

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

export class NewsComponent implements OnInit{ 
   
	@viewChild("msg") msg:any;
}

下面就可以使用msg来调用子组件中通过msg传过来的数据

3. 在父组件通过msg调用子组件数据即可

下面看实际操作：
第一步：在引入子组件的命令中声明模板变量

第二步：在子组件定义好数据

第三步：在父组件使用viewChild接收子组件数据

第四步：这时可以在父组件的ts文件或模板文件中使用子组件所有数据或方法

注意：可以在父组件通过msg来调用子组件所有数据和方法。

4.非父子组件如何传递数据

现在我知道的有三种方法：

1. cookie:只要在一个组件的ts文件中设置了cookie,则其他组件也可以读取cookie的键值对。
2. service:定义一个服务，将不同组件中要使用相同的函数用一个服务包裹，则可以在不同组件引入这个服务来公用同一方法。
3. web存储：这个方法比cookie好，因为cookie的容量在4K之内，且cookie需随着请求发送给服务端，会影响请求与响应的速度。而web存储容量大，存储更加安全与快速，不影响网站的性能。