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

angular框架如何实现父子组件传值、非父子组件传值文章目录1.理解父子组件、非父子组件2.父组件给子组件传值–@input3.父组件通过@ViewChild主动获取子组件的数据和方法4.非父子组件如何传递数据1.理解父子组件、非父子组件什么是父子组件?组件的父子关系是相对来说的,即在一个A组件中嵌入了B组件,那么在这一层关系中,A组件是B组件的父组件,B组件是A组件的子组件。看下面两幅图即可理解:app.component.html与普通组件的关系:普通组件与普通组件:现在应该知道父子组件是什么关系了,关键看谁嵌入了谁那里。父子组件

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

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是父组件中定义的一个变量或方法
  1. 子组件引入@input模块:
import { 
    Component,OnInit,Input} from '@angular/core';

	即多引入了Input
  1. 子组件中@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>

#号后面加一个变量名,组成模板变量
  1. 在父组件中引入viewChild:
import { 
   Component,OnInit,ViewChild } from '@angular/core';

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

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

下面看实际操作:
第一步:在引入子组件的命令中声明模板变量
在这里插入图片描述
第二步:在子组件定义好数据

在这里插入图片描述
第三步:在父组件使用viewChild接收子组件数据
在这里插入图片描述
第四步:这时可以在父组件的ts文件或模板文件中使用子组件所有数据或方法
在这里插入图片描述
注意:可以在父组件通过msg来调用子组件所有数据和方法

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

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

  1. cookie:只要在一个组件的ts文件中设置了cookie,则其他组件也可以读取cookie的键值对。
  2. service:定义一个服务,将不同组件中要使用相同的函数用一个服务包裹,则可以在不同组件引入这个服务来公用同一方法。
  3. web存储:这个方法比cookie好,因为cookie的容量在4K之内,且cookie需随着请求发送给服务端,会影响请求与响应的速度。而web存储容量大,存储更加安全与快速,不影响网站的性能。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145564.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 分享pycharm如何安装插件(Plugins)

    分享pycharm如何安装插件(Plugins)链接:https://plugins.jetbrains.com/pycharm一、把插件的zip文件下载到本地二、File=>settings=>plugins本来可以像vscode一样直接搜直接安装,但是它一直转不出来,所以我先去上面的官网下载插件到本地再安装三、点开updates后面的小齿轮,选择installpluginfromdisk(从硬盘下载),选择刚刚下…

  • Mysql自连接查询「建议收藏」

    Mysql自连接查询「建议收藏」自连接查询假想以下场景:某一电商网站想要对站内产品做层级分类,一个类别下面有若干子类,子类下面也会有别的子类。例如数码产品这个类别下面有笔记本,台式机,智能手机等;笔记本,台式机,智能手机又可以按照品牌分类;品牌又可以按照价格分类,等等。也许这些分类会达到一个很深的层次,呈现一种树状的结构。那么这些数据要怎么在数据库中表示呢?我们可以在数据库中创建两个字段来存储id和类别名称,使用第三个字段存

  • networkmanager详解_networkmanager是什么服务

    networkmanager详解_networkmanager是什么服务NetworkManager服务是管理和监控网络设置的守护进程,CentOS7更加注重使用NetworkManager服务来实现网络的配置和管理,CentOS7以前是通过network服务管理网络,以后的版本所有网络管理和设置统一由NetworkManager服务来维护。它是一个动态的,事件驱动的网络管理服务。下面看一下CentOS7中network和NetworkManger的信息吧。注意:…

  • (转)淘淘商城系列——导入商品数据到索引库——dao层

    (转)淘淘商城系列——导入商品数据到索引库——dao层

  • 抖音粉丝快速增长的有效方法 抖音怎么增加1000粉丝

    抖音粉丝快速增长的有效方法 抖音怎么增加1000粉丝同比淘宝、京东、拼多多等成熟的电商平台,抖音视频在短短几年内以“病毒式”的增长速度发展。很多人也想趁着这个风口,抢夺这块蛋糕。但对于,没有运营经验的人来说,账号要做起来并非是这么简单。那么想要做好抖音号,内容策划、账号定位、人群画像、发布时间该注意什么呢?抖音用户画像和人群分析人群性别:抖音的用户中,52%的用户为男性,48%的用户为女性,男女比例基本属于持平。另一方面,抖音的男性大多是理性消费者,女性大多是感性消费者。如果你的产品的针对人群是男性,内容应该偏向性价比、功能、

  • java观看视频次数_java数字转换视频播放次数等

    java观看视频次数_java数字转换视频播放次数等1.1万、9999.9万、1.1亿、999亿+*播放量的数字显示规则1-9999,按照实际数字显示10000-9999999,按照1万、1.1万、9999.9万100000000-99900000000,按照1亿、1.1亿、999亿>99900000000,统一显示为999亿+所有数字显示均保留到小数点后一位即可“`java/***视频观看次数、评论数**@paramtimes*@…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号