Передача ввода и вывода через родительский компонент

Я пытаюсь передать некоторую информацию из компонента A через родительский компонент в компонент B.

У меня есть компонент A, где у меня есть выходы.

componentA.ts

@Output() status = new EventEmitter();
public getColor() {
   ...
   this.emit(color);
}

componentB.ts

@Input('status') status;

ngOnInit() {
  console.log(this.status) // Got EventEmitter false object
}

parent.html (необходимо включить компонент B в этот HTML)

<componentA (status)="getStatus(s)"></componentA>
<componentB [status]="status"></componentB>

parent.ts

@Output() status=new EventEmitter();
public getStatus(s) {
    this.status.emit(s)
}

В настоящее время я получаю сообщение «EventEmitter {_isScalar: false, наблюдатели: Array (0), closed: false, isStopped: false, hasError: false…», в ​​котором я не могу просмотреть информацию, переданную из компонента A. Я подтверждаю, что s существует внутри функции getStatus. Если есть лучший подход, пожалуйста, посоветуйте.


typescript angular components eventemitter
person Matt-pow    schedule 28.05.2017    source источник
comment
вы можете создать плункер?   -  person Aravind    schedule 28.05.2017

Ответы (1)


arrow_upward
1
arrow_downward

Твои ошибки,

  • this.emit в компоненте A, который должен быть this.status.emit(..)
  • В вашем компоненте B вы должны использовать ngOnChanges для прослушивания изменений, а не ngOnInit

Следуйте приведенному ниже коду,

@Component({
  selector: 'my-app',
  template: `
    <div> 
      {{status}}
      <componentA (status)="getStatus($event)"></componentA>
    <componentB [status]="status"></componentB>
    </div>
  `,
})
export class App {
  name:string;
  status:string;
  getStatus(event){
    console.log(event)
    this.status = event
  }
  constructor() {

  }
}
@Component({
  selector: 'componentA',
  template: `
    <div>
     <button (click)="getColor()"> Click for red color</button>


    </div>
  `,
})
export class CompA {
  @Output() status = new EventEmitter<string>();
  public getColor() {
     this.status.emit('red');
}
}
@Component({
  selector: 'componentB',
  template: `
    <div>

    </div>
  `,
})
export class CompB {
  @Input('status') status;
  ngOnChanges() {
  console.log('CompB input arrived', this.status) // Got EventEmitter false object
}
}

Живая демонстрация

person Aravind    schedule 28.05.2017