Не получить событие от немого компонента
Я не могу получить событие от немого компонента. Я думал, что он работает, но не привязывает событие к интеллектуальному компоненту. Результат в порядке, но когда я изменяю значение события, не работает, и нет ошибки отображения.
// 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 (еще один тупой компонент)
<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>
Спасибо, но у меня проблема со stackblitz, ни один из вопросов stackoverflow не решает эту проблему. Так что я на нем. Тогда я поделюсь своим проектом, у меня он только что есть на гитхабе. На самом деле не знаю, использую ли я вывод в правильном вложенном компоненте, и я пробовал много способов
Вот мое приложение, несмотря на то, что оно не работает в Stackblitz (оно работает локально, и я пробовал даже опубликованные вопросы об этом из stackoverflow) stackblitz.com/github/NachoBFL/ScientificApp
добавлен ответ, пожалуйста, проверьте один раз. Код доступен в stackblitz.com/edit/….
Что ж, похоже, у меня снова и снова возникала одна и та же ошибка в stackblitz. В любом случае спасибо, это сработало локально
Ответы 1
Вы не генерируете событие selected в PlanetViewComponent. Фактическое событие selected возникает из DropdownMenuComponent. Если вы не испустите событие selected из PlanetViewComponent, вы не сможете его прослушивать в 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() {
}
}
Я мог бы отметить это и еще одну вещь, которая будет работать, находится внутри planet-data.component.html, поместите компонент nest <app-dropdown-menu> Итак, код: <app-dropdown-menu class = "align" (selected) = "onSelect($event)"></app-dropdown-menu> <div class = "main"> <app-loading *ngIf = "loading"></app-loading> <app-planet-view class = "fixed" [pics] = "pics"></app-planet-view> </div>. Спасибо за ваше время
пожалуйста, поделитесь URL-адресом stackblitz для сценария. это поможет, и другие смогут лучше понять код.