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}}在我的ParentComponent html中没有显示任何内容。我觉得我很亲密。感谢您的帮助！

Answer 1

这段代码似乎没有多大意义。

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

模板使用其作为模板的组件的选择器<myselector>。虽然有些情况下这是有意义的（像树一样的递归结构），但这似乎并不是这里的意图。

directives上的pipes和@Component()一段时间内都已消失，应该添加到@NgModule()。显然你正在使用一些beta或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);
  }
}

Angular2在组件之间传递变量

1 个答案: