angular父子组件的传值，兄弟之间传值

1.父级向子级传值，不管是属性，方法，还是整个父级对象this,都可以通过类似变量的形式传入，具体如下

<app-detail #detail msg="123"></app-detail> //传入的值不是变量

<app-detail #detail [msg]="parentMsg"></app-detail> //传入的是变量

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

// 通过input装饰器获取父级传过来的值

@Input() msg: string;  //获取值

ngOnInit() {

  console.log(this.msg, '-----子组件传过来的msg-----');

}

//直接 this 可以引用

2.父级获取子组件的信息

第一种可以通过ViewChild的方式进行获取

<app-detail #detail [msg]="parentMsg"></app-detail>  //组件

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';

//引入 ViewChild

@ViewChild('detail') myDom: any;

ngAfterViewInit(): void {

   console.log(this.myDom.msg);
   this.myDom.run();

}

//直接就能获取子组件的数据

第二种通过@Output 和 EventEmitter获取

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

//子组件引入装饰器

@Output() private outer = new EventEmitter();

//定义@Output的装饰器

emitData() {

    this.outer.emit('传入給父级的值');

}

//子组件emit给父级的方法

<button (click)="emitData()">提交数据给父级</button> //按钮触发

<app-detail #detail [msg]="parentMsg" (outer)="getChildMsg($event)"></app-detail>

//父级通过outer事件接受，参数是$event, outer必须和子组件定义的变量名一致

getChildMsg(msg) {

  console.log(msg, '---从子集拿过来的值---');

}

// 父级获取emit传过来的值

3.兄弟之间传值通过localStorage或者是服务进行获取