Angular2 Передача переменных между компонентами

Question

У меня есть следующие компоненты ниже:

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

} 

Я просто пытаюсь понять, как вывести значение переменной this.startTest от ChildComponent к ParentComponent. Прямо сейчас, {{testEmitter}} ничего не показывает в моем html ParentComponent. Я чувствую, что я рядом. Ваша помощь приветствуется!

Answer 1

Этот код не имеет большого смысла.

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

Шаблон использует селектор <myselector> компонента это шаблон. Хотя есть сценарии, где это имеет смысл (рекурсивные структуры, такие как деревья), это, похоже, не является намерением здесь.

Также directives и pipes на @Component() исчезли с течением времени и должны быть добавлены к @NgModule(). Очевидно, что вы используете бета-версию или версию RC вместо окончательной версии Angular2, где это поддерживается. Я предлагаю обновить до последней версии Angular2.

Это может быть то, что вы хотите вместо этого:

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