首页 文章

没有从哑组件中获取事件

提问于
浏览 次
-1

我无法从愚蠢的组件中获取该事件 . 我认为它有效，但没有将事件绑定到智能组件 . 输出正常，但是当我更改事件的值不起作用并且没有显示错误 .

// planet-data.component.html（智能组件）

<div class="main">
    <app-loading *ngIf="loading"></app-loading>
    <app-planet-view [pics]="pics" class="fixed" (selected)="onSelect($event)"></app-planet-view>
</div>

// planet-data.component.ts

onSelect(event: Cam) {
    if (event.name === 'CHEMCAM') {
      this.loading = true;
      this.getCamType();
    } else {
      this.loading = true;
      event.name === 'NAVCAM' ? this.getCamType('spirit', 'navcam') : this.getCamType('opportunity', 'fhaz');
    }
  }

// dropdown-menu.component.html（哑组件）

<p-dropdown [options]="cameras" [(ngModel)]="selectedCam" placeholder="Select a Cam" optionLabel="name"
            (ngModelChange)="getDisplayCam($event)">
</p-dropdown>

// dropdown-menu.component.ts

getDisplayCam(event: Cam) {
    this.selected.emit(event);
  }

// planet-view.component.html（另一个Dumb组件）

<div *ngIf="pics">
  <div *ngFor="let pic of pics.photos">
    <div class="card" style="width: 16rem;">
      <img class="card-img-top" src="{{pic.img_src}}" alt="Card image cap">
      <p>{{pic.earth_date | date}}</p>
    </div>
  </div>
  <h4>{{title}}</h4>
  <app-dropdown-menu></app-dropdown-menu>
</div>
angular typescript

1 回答

  • 0

    您没有在 PlanetViewComponent 中发出 selected 事件 . 实际的 selected 事件是从 DropdownMenuComponent 引发的 . 如果您不从 PlanetViewComponent 发出 selected 事件，那么您无法在 PlanetDataComponent 中收听它 .

    代码 planet-view.component.html .

    <div *ngIf="pics">
  <div *ngFor="let pic of pics.photos">
    <div class="card" style="width: 16rem;">
      <img class="card-img-top" src="{{pic.img_src}}" alt="Card image cap" routerLink="/detail">
      <p>{{pic.earth_date | date}}</p>
    </div>
  </div>
  <!-- Added catching (selected) event -->
  <app-dropdown-menu (selected)="selected.emit($event)"></app-dropdown-menu>
</div>

    代码 planet-view.component.ts 如下 .

    @Component({
  selector: 'app-planet-view',
  templateUrl: './planet-view.component.html',
  styleUrls: ['./planet-view.component.sass']
})
export class PlanetViewComponent implements OnInit {

  @Input() pics: Photo;

  // Added @Output() event
  @Output() selected = new EventEmitter<Cam>();
  constructor() {}

  ngOnInit() {
  }
}
    回复于

相关问题