#angular #events #custom-events
Вопрос:
Ниже приведен код дочернего компонента, компонента после создания и родительского компонента, компонента приложения. Я использую angular 13 и запускаю его в операционной системе Ubuntu. Я хочу создать пользовательское событие, когда нажимается кнопка, указанная в дочернем компоненте, выполняющая функцию, указанную в родительском компоненте, при возникновении этого события. Похоже, что событие не срабатывает.
Html дочернего компонента
lt;mat-cardgt; lt;mat-form-field appearance="fill"gt; lt;mat-labelgt;Enter Post Titlelt;/mat-labelgt; lt;input matInput type="text" [(ngModel)]="titlevalue"gt; lt;/mat-form-fieldgt; lt;mat-form-field appearance="fill"gt; lt;mat-labelgt;Enter Post Contentlt;/mat-labelgt; lt;textarea matInput rows="5" [ (ngModel)]="contentvalue"gt;lt;/textareagt; lt;/mat-form-fieldgt; lt;/mat-cardgt; lt;button color="accent" mat-raised-button (click)="onAddPost()"gt;Save Postlt;/buttongt; Файл TS дочернего компонента
import { Component, EventEmitter, Output} from '@angular/core'; import {Post} from '../post.model' @Component({ selector: 'post-create', templateUrl:'./post-create.component.html', styleUrls:['./post-create.component.css'] }) export class postcreatecomponent { titlevalue: any; contentvalue: any; @Output() posted: EventEmitterlt;Postgt;=new EventEmitterlt;Postgt; (); onAddPost(){ const post:Post={ title:this.titlevalue, content:this.contentvalue }; this.posted.emit(post); } } Родительский HTML-файл
lt;headergt;lt;/headergt; lt;maingt; lt;post-create (posted)="onPostAdded($event)"gt; lt;/post-creategt; lt;output-post [posts]="storedPosts" gt;lt;/output- postgt; lt;/maingt; Родительский файл TS
import { Component } from '@angular/core'; import { Post } from './posts/post.model'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent{ storedPosts:Post[]=[] onPostAdded(post:Post){ this.storedPosts.push(post); } }
Комментарии:
1. Где именно происходит сбой?, вы проверили с помощью console.log(), какие события запускаются, а какие нет.
2. Пользовательское событие, опубликованное, не отправляется. Метод onAddPost() выполняется, но метод onPostAdded() не выполняется.
3. Я решил проблему, на самом деле я включил дочерний компонент в начальную загрузку в главном приложении. Он заработал, как только я его удалил.