文章目录
1.理解父子组件、非父子组件
2.父组件给子组件传值- -@input
3.父组件通过@ViewChild主动获取子组件的数据和方法
4.非父子组件如何传递数据
1.理解父子组件、非父子组件
什么是父子组件？
组件的父子关系是相对来说的，即在一个A组件中嵌入了B组件，那么在这一层关系中，A组件是B组件的父组件，B组件是A组件的子组件。
看下面两幅图即可理解：
app.component.html与普通组件的关系：
普通组件与普通组件：
现在应该知道父子组件是什么关系了，关键看谁嵌入了谁那里。
父子组件可以相互获取对方组件的数据以及方法。
2.父组件给子组件传值- -@input
父组件不仅可以给子组件传简单的数据，还可以把它自己的方法以及整个父组件传给子组件，通过HTML模板实现传值。
看看操作步骤：
在父组件中给子组件的HTML传入“msg”信息：
假设将shopping组件嵌入到news组件中，则shopping是子组件
下面给子组件通过“模板属性”方式传递数据:
[msg]中的属性名随意定义，message是父组件中定义的一个变量或方法/pre>
p>子组件引入@input模块：
/p>
pre class='language-javascript'>
import {
Component,OnInit,Input} from '@angular/core';
即多引入了Input/pre>
p>子组件中@input接收父组件传过来的数据：
/p>
pre class='language-javascript'>
export class newsComponent implements OnInit{
@Input msg:string
}
即在组件的类中用Input修饰符接收数据/pre>
p>以上三步就完成了父组件给子组件传递数据。
/p>
p>下面看实际操作：
/p>
p>第一步：在父组件声明即将传递给子组件的message字符串
/p>
p>
第二部：在父组件模块中引入子组件
/p>
p>
第三部：在子组件ts文件中接收父组件传来的数据
/p>
p>查看浏览器是否传值成功：
/p>
p>
父组件给子组件传递方法也是这样。
/p>
pre class='language-javascript'>
假设父组件有一个方法：
setChild(){
}
则在子组件模板这样绑定：
/code>
code class='prism'>
/app-shopping>
br />
br /> #号后面加一个变量名，组成模板变量
br /> Component,OnInit,ViewChild } from '@angular/core';
br />
br /> export class NewsComponent implements OnInit{
br />
br />@viewChild("msg") msg:any;
br /> }
br />
br /> 下面就可以使用msg来调用子组件中通过msg传过来的数据
在父组件通过msg调用子组件数据即可
下面看实际操作：
第一步：在引入子组件的命令中声明模板变量
第二步：在子组件定义好数据
第三步：在父组件使用viewChild接收子组件数据
第四步：这时可以在父组件的ts文件或模板文件中使用子组件所有数据或方法
注意：可以在父组件通过msg来调用子组件所有数据和方法。
4.非父子组件如何传递数据
现在我知道的有三种方法：
cookie:只要在一个组件的ts文件中设置了cookie,则其他组件也可以读取cookie的键值对。
service:定义一个服务，将不同组件中要使用相同的函数用一个服务包裹，则可以在不同组件引入这个服务来公用同一方法。
web存储：这个方法比cookie好，因为cookie的容量在4K之内，且cookie需随着请求发送给服务端，会影响请求与响应的速度。而web存储容量大，存储更加安全与快速，不影响网站的性能。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/124760.html