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