Angular7父子组件以及父子组件之间的通信 非父子组件之间传值

Angular7父子组件以及父子组件之间的通信 非父子组件之间传值

父组件给子组件传值-@input

• 先在父组件ts中定义一个属性

public title: string = '我是首页组件的标题';

• 在父组件html页面元素中绑定属性

<app-header [title]="title"></app-header>

• 在子组件中引入Input

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

• 在子组件ts文件中获取父组件传过来的值

  //接受父组件传过来的数据
  @Input() title: any;

• 在子组件页面元素中绑定父组件传过来的值

<header>{{title}}</header>

父组件给子组件传方法

• 先在父组件ts文件中定义一个方法

  run() {
    alert('我是父组件中的一个方法');
  }

• 在子组件html页面中定义一个button

<button (click)="doFaRun()">子组件执行父组件中的方法</button>

• 在父组件中绑定方法

<app-header [run]="run"></app-header>

• 在子组件接收方法

@Input() run: any;

• 在子组件ts文件中实现这个方法

//执行父组件的方法
doFaRun() {
  this.run();
}

将整个父组件传给子组件

• 在子组件ts文件中定义home属性

 @Input() home: any;

• 在父组件html中绑定home

<app-header [home]="this"></app-header>

• 在子组件ts文件中调用

  //执行父组件的方法
  doFaRun() {
    alert(this.home.msg);
    this.home.run();
  }

子组件给子父组件传值

• 先在子组件中定义一个数据和方法

public msg: string = "我是子组件的一个msg";

run() {
  alert("我是子组件的一个方法");
}

• 在父组件html文件中给子组件起一个名字

<app-footer #footer></app-footer>

• 在父组件中写两个按钮，并在父组件ts文件中实例化这两个方法

<button (click)="getChildMsg()">
  获取子组件定义的msg
</button>
<br>
<br>
<button (click)="doChildRun()">
  执行子组件定义的方法
</button>

//获取子组件定义的msg
getChildMsg() {

}
//执行子组件定义的方法
doChildRun() {

}

• 在父组件ts文件中引入viewChild
  import { ViewChild } from '@angular/core';
• 在父组件html中获取到子组件

@ViewChild("footer") footer: any;

• 在父组件中调用

//获取子组件定义的msg，执行子组件中的方法
getChildMsg() {
  alert(this.footer.msg);
}

//执行子组件定义的方法
doChildRun() {
  this.footer.run();
}

小结：父子组件之间传值，就直接将整个组件传过去，然后通过组件获取值或者调用方法。

非父子组件之间传值就用service传值