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>