上層傳入下層

說明

1. 將上層元件的值，利用屬性繫結，傳給下層元件使用
2. 下層元件接收值的變數需使用@Input()裝飾器

Template語法：

<下層元件selector名稱 [下層元件接收值的變數]="上層元件傳出的值(變數或方法)">
</下層元件selector名稱>

程式碼範例：

1.在下層元件Component.ts的Metadata中設定selector屬性，加入接收值的變數inputVariable

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

@Component({
  selector: 'child-component',
  template: '<p>亂數值(1~10)為{{inputVariable}}</p>',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input()
  inputVariable;

  constructor() { }

  ngOnInit() {
  }

}

2.在上層元件Component.ts中加入傳出值的方法outputMethod()

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

@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  outputMethod(){
    return Math.floor(Math.random() * 10 + 1);
  }

  constructor() { }

  ngOnInit() {
  }

}

3.在上層元件Template使用下層元件directive，並使用屬性繫結將outputMethod方法return的值傳給下層元件的inputVariable變數

<child-component [inputVariable]="outputMethod()"></child-component>