Angular2在组件之间传递变量

Question

I have the following component below:

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

}

I am just trying to figure out how to display the value of the this.startTest variable from the ChildComponent to the ParentComponent. Right now, the {{testEmitter}} doesn't show anything in my ParentComponent html. I feel like I'm close. Your help is appreciated!

Answer 1

This code doesn't seem to make much sense.

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

The template uses the selector <myselector> of the component it is the template of. While there are scenarios where this make sense (recursive structures like trees) this doesn't seem to be the intention here.

Also directives and pipes on @Component() are gone since a while and should be added to @NgModule() instead. Obviously you are using some beta or RC version instead of final of Angular2 where this is still supported. I'd suggest to update to the newest Angular2 version.

This might be what you want instead:

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