Angular2 Weitergabe Variablen zwischen den Komponenten

Question

Ich habe die folgende Komponente unter:

@Component({ 
    selector: 'myselector', 
    providers: [ ], 
    directives: [ ChildComponent], 
    pipes: [ ], 
    template: '<myselector>This is {{testEmitter}}</myselector>' 
}) 

export class ParentComponent{ 
    @Input() testEmitter; 
    constructor(){ 
    } 
} 

//My Child class goes as such: 
@Component({ 
    selector: 'childselector', 
    templateUrl: '<childselector><input type="text" (focus)="beginTest()"/></childselector>', 
    pipes: [], 
    directives: [] 
}) 
export class ChildComponent{ 
    @Output() testEmitter: EventEmitter = new EventEmitter(); 
    startTest: boolean = false; 

    constructor() { 

    } 
    beginTest(){ 
     this.startTest = !this.startTest; 
     this.testEmitter.emit(this.startTest); 
    } 

} 

mir nur, um herauszufinden, wie man den Wert des von der ChildComponent zum Parent this.startTest Variable anzuzeigen. Im Moment zeigt die {{testEmitter}} nichts in meiner ParentComponent html. Ich fühle mich, als wäre ich nah dran. Deine Hilfe wird geschätzt!

Answer 1

Dieser Code scheint nicht viel Sinn zu machen.

@Component({ 
    selector: 'myselector', 
    providers: [ ], 
    directives: [ ChildComponent], 
    pipes: [ ], 
    template: '<myselector>This is {{testEmitter}}</myselector>' 
}) 

Die Schablone verwendet den Selektor <myselector> des Bauteils ist es die Vorlage. Während es Szenarien gibt, in denen dies sinnvoll ist (rekursive Strukturen wie Bäume), scheint dies hier nicht die Absicht zu sein.

Auch directives und pipes auf @Component() sind seit einer Weile weg und sollten stattdessen zu @NgModule() hinzugefügt werden. Offensichtlich verwenden Sie eine Beta oder RC-Version anstelle von Angular2, wo dies noch unterstützt wird. Ich würde vorschlagen, auf die neueste Version von Angular2 zu aktualisieren.

Dies könnte sein, was Sie wollen statt:

@Component({ 
    selector: 'parentselector', 
    directives: [ChildComponent], 
    template: '<childselector (testEmitter)="testEmitter=$event">This is {{testEmitter}}</childselector>' 
}) 

export class ParentComponent{ 
    @Input() testEmitter; 
} 

@Component({ 
    selector: 'childselector', 
    templateUrl: '<input type="text" (focus)="beginTest()"/>', 
}) 
export class ChildComponent{ 
    @Output() testEmitter: EventEmitter = new EventEmitter(); 
    startTest: boolean = false; 

    beginTest(){ 
     this.startTest = !this.startTest; 
     this.testEmitter.emit(this.startTest); 
    } 
}