我如何使用@Input在組件之間傳遞數據

Question

在這里，我有兩個組件，例如DummyComponent和LoginComponent，我想從登錄名向Dummy傳遞2個數據

DummyComponent.ts

@Component({
    selector: "Dummy-Selector",
    template: `<div>
    <p>This is Dummy</p>
    <input type="text" value="{{sampleData}}"  ([ngModel])="sampleData" />
</div>`
})
export class DummyComponent {
    @Input() IncommingData: string;

LoginComponent

export class LoginComponent {
    sampleData: string = "Login Components...";

LoginComponent.html在這里，我需要將SampleData從LoginComponent傳遞到DummyComponent

 <div>
        <input type="text"  value="{{ sampleData }}" [(ngModel)]='sampleData'>
        <b>data from child</b>
             <Dummy-Selector [IncommingData]="sampleData" (childData)='handleEvent($event)' [(ngModel)]="sampleData">

                </Dummy-Selector>
    </div>

Answer 1

在您的dummyComponent中，您應該綁定IncommingData而不是sampleData

@Component({
    selector: "Dummy-Selector",
    template: `<div>
    <p>This is Dummy</p>
    <span>{{IncommingData}}</span>
    <input type="text" [(ngModel)]="IncommingData" />
</div>`
})