[Angular2] Input 用法

將 App component 的值 input 到 inside component 用

也就是 inside comp 需要吃一個值 從 App comp

github


1. import input, 設定input 的變數

/* inside.component.ts*/
------------------------------------
import { Component, OnInit ,Input} from '@angular/core';   //import Input

@Component({
  selector: 'app-inside',
  templateUrl: './inside.component.html',
  styleUrls: ['./inside.component.css']
})

export class InsideComponent implements OnInit {

  @Input()
  public inputTextFromAppComp='';

  constructor() { }

  ngOnInit() {
  }

}



2.  html 部分就簡單直接print

/* inside.component.html*/
------------------------------------
input text from AppComp:

{{

inputTextFromAppComp}}



3. 

/* app.component.ts*/
------------------------------------
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app works!';
  public appText = "string in app comp "

}





4.在App comp的appText 傳給 在inside Comp 的 inputTextFromAppComp

/* app.component.html*/
------------------------------------

inputTextFromAppComp]="appText" >