Angular4 @Input(), um den Wert von der übergeordneten Komponente an die untergeordnete Komponente zu übergeben

Question

Ich habe einen Code in App component.html wie folgt.

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

In AppComponent.ts habe ich Code wie folgt.

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; 
    } 
} 

Jetzt habe ich eine Komponente namens MyComponent3 erstellt. In dieser Komponente möchte ich die Daten von App Komponente.Verfahren-Code abrufen für MyComponent3.html wie folgt:

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

In MyComponent3.ts Ich habe den folgenden Code.

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() { 
    } 
} 

Aber in der Ausgabe wird der Wert nicht von AppComponent an My Component3 übergeben.

Answer 1

Jedes Attribut, das an die untergeordnete Komponente übergeben werden soll, sollte darin erwähnt werden. Sie können wie folgt an die untergeordnete Komponente mit @input und html übergeben:

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