angular的组件传值

百姓之声特约 發表於 2021-1-28 10:07:00

angular组件传值存在三种情况,分别是父传子 ,子传父,以及非父子之间进行传值
<h2 class="md-end-block md-heading">1.父传子</h2>
 通过在子组件上绑定属性或者方法,在子组件xxx.componet.ts中导入Input类, 进行接收,可以获取父组件传过来的内容
父组件.html
<div class="cnblogs_code">
<pre><app-home = 'msg' ='logApp' ='this'></app-home>
// msg是数据logApp是方法名 this是这个组件的对象</pre>
</div>
 
子组件.component.ts
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">import {Input} from '@angular/core';
---------------------------------------------------
@input() msg:string;
@input() run:any;
@input() home:home;
// 使用的时候用this进行调用
</pre>
</div>
　　
<h2 class="md-end-block md-heading">2.子传父</h2>
<h4 class="md-end-block md-heading">1.Output & eventEmitter</h4>
通过引入Output 和eventEmitter 可以设置自定义事件从而使父组件
第一步在子组件中引入Output 以及 eventEmitter
<div class="cnblogs_code">
<pre>import { Component, OnInit, Output,EventEmitter } from '@angular/core';</pre>
</div>
 
第二步 
<div class="cnblogs_code">
<pre>@Output private outer = new EventEmitter()</pre>
</div>
 
第三步,定义一个方法在方法中通过emit 调用父组件的方法
<div class="cnblogs_code">
<pre>setData(){
this.outer.emit('是嘛')
}</pre>
</div>
 
第四步, 在父组件中的标签上设置事件
<div class="cnblogs_code">
<pre>// html
<app-foot (outer)="getData($event)"></app-foot>
// ts
getData(msg:string){
console.log(msg);
}</pre>
</div>
 
注意点: 在父组件.html中绑定方法的时候方法名必须和子组件.component.ts中通过 new eventEmitter()实例出的对象一致, 不然就会出现错误
<h4 class="md-end-block md-heading">2.viewChild</h4>
在父组件.html 给子组件标签绑定上 #xxx 通过@viewChild 获取子组件的对象就可以获取子组件的数据以及调用子组件的方法
<div class="cnblogs_code">
<pre>// .html绑定#xxx属性
<app-news #newsChild></app-news>
// component.ts
import { ViewChild } from '@angular/core';

-----------------------
// 获取到news对象就是组件
@viewChild('newsChild') news
</pre>
</div>
 
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"> 在方法中 this.news就是可以获取这个对象实例 </pre>
<h2 class="md-end-block md-heading">3.非父子之间的传值 </h2>
1.service 通过服务可以进行传值 
2.本地存储 localStorage sessionStorage 
  
来源：https://www.cnblogs.com/shicongcong0910/p/14338262.html

頁: [1]

琼殿技术论坛's Archiver

angular的组件传值