angular的组件传值

angular组件传值存在三种情况,分别是 父传子 , 子传父 ,以及 非父子之间 进行传值

1.父传子

通过在子组件上绑定属性或者方法,在子组件xxx.componet.ts中 导入Input类, 进行接收,可以获取父组件传过来的内容

父组件.html

<app-home [msg] = 'msg' [run]='logApp' [home]='this'></app-home>
 //   msg是数据  logApp是方法名   this是这个组件的对象 

 

子组件.component.ts

import {Input} from '@angular/core';
---------------------------------------------------
@input() msg:string;
@input() run:any;
@input() home:home;
// 使用的时候用this进行调用

　　

2.子传父

1.Output & eventEmitter

通过引入Output 和eventEmitter 可以设置自定义事件 从而使父组件

第一步 在子组件中引入Output 以及 eventEmitter

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

 

第二步

@Output private outer =  new  EventEmitter()

 

第三步,定义一个方法 在方法中通过emit 调用父组件的方法

 setData(){
      this .outer.emit('是嘛' )
  } 

 

第四步, 在父组件中的标签上设置事件

 //   html 
<app-foot (outer)="getData($event)"></app-foot>
 //   ts 
 getData(msg:string){
    console.log(msg);
  } 

 

注意点: 在父组件.html中绑定方法的时候 方法名必须和子组件.component.ts中 通过 new eventEmitter()实例出的对象一致, 不然就会出现错误

2.viewChild

在父组件.html 给子组件标签绑定上 #xxx 通过@viewChild 获取子组件的对象 就可以获取子组件的数据以及调用子组件的方法

 //   .html  绑定#xxx属性 
<app-news #newsChild></app-news>
 //   component.ts 
import { ViewChild } from '@angular/core' ;
​
 -----------------------
 //   获取到news对象 就是组件 
@viewChild('newsChild' ) news
​ 

 

           
 在方法中 this.news就是可以获取这个对象实例
  ​              

3.非父子之间的传值

1.service 通过服务可以进行传值

2.本地存储 localStorage sessionStorage

 

查看更多关于angular的组件传值的详细内容...