Angular4 @Input（）將值從父組件傳遞到子組件

Question

我在App component.html中有一個像這樣的代碼。

 <form>
        <input #box1 (blur)="onKey1(box1.value)" type="text" name="username">
        <p>{{box1.value}}</p>
    </form>

在AppComponent.ts中我有這樣的代碼。

import { Component } from '@angular/core';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent{
    type:string;
    constructor() { }
    onKey1(value:string)
    {
        this.type=value;  
    }
}

現在我創建了一個名為MyComponent3的組件。 在該組件中，我想從app組件中檢索數據.MyComponent3.html的代碼如下：

<p>{{type}}</p>

在MyComponent3.ts中，我有以下代碼。

import { Component, OnInit, ViewEncapsulation,Input } from '@angular/core';
@Component({
    selector: 'app-my-component3',
    templateUrl: './my-component3.component.html',
    styleUrls: ['./my-component3.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class MyComponent3Component implements OnInit {
    @Input() type;
    ngOnInit() {
    }
}

但是在輸出中，值沒有從AppComponent傳遞到My Component3。

Answer 1

應該在其中提及您要傳遞給子組件的任何屬性。 您可以使用@input和html傳遞給子組件，如下所示，

<app-my-component3 [type]="type"></app-my-component3>