@Output プロパティを初期化する他の方法
Angular コンポーネントで @Output
を使用したイベントバインディングで発生する "An error occurred: @Output not initialized" エラーの解決方法
Angular コンポーネントで @Output
デコレータ付きのカスタムイベントを定義し、親コンポーネントでイベントバインディングを行う場合、@Output
プロパティが初期化されていないと "An error occurred: @Output not initialized" エラーが発生します。
原因
このエラーは、@Output
デコレータ付きのプロパティがコンポーネントクラス内で初期化されていないことが原因です。
解決方法
このエラーを解決するには、以下のいずれかの方法で @Output
プロパティを初期化します。
コンポーネントクラス内で初期化する
コンポーネントクラス内で @Output
プロパティを new EventEmitter()
で初期化します。
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my-component.component.html',
})
export class MyComponent {
@Output() myEvent = new EventEmitter<any>();
// ...
}
コンポーネントコンストラクタで初期化する
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my-component.component.html',
})
export class MyComponent {
@Output() myEvent: EventEmitter<any>;
constructor() {
this.myEvent = new EventEmitter();
}
// ...
}
テンプレートファイルで初期化する
テンプレートファイルで @Output
プロパティを $event
で初期化します。
<my-component (myEvent)="onMyEvent($event)"></my-component>
- テンプレートファイルで
@Output
プロパティを初期化する方法も可能ですが、コンポーネントクラス内またはコンポーネントコンストラクタで初期化する方法の方が推奨されます。 @Output
デコレータ付きのプロパティは、イベントバインディングで使用するために、コンポーネントクラス内またはコンポーネントコンストラクタで初期化する必要があります。
<h1>親コンポーネント</h1>
<p>子コンポーネントから送信されたメッセージ: {{ message }}</p>
<my-component (myEvent)="onMyEvent($event)"></my-component>
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
message: string = '';
onMyEvent(message: string) {
this.message = message;
}
}
<button (click)="onButtonClick()">送信</button>
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my-component.component.html',
})
export class MyComponent {
@Output() myEvent = new EventEmitter<string>();
onButtonClick() {
this.myEvent.emit('メッセージ from 子コンポーネント');
}
}
@Output
プロパティを初期化する他の方法
@Output デコレータのオプションを使用する
@Output
デコレータのオプションを使用して、@Output
プロパティの初期値を指定することができます。
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my-component.component.html',
})
export class MyComponent {
@Output() myEvent = new EventEmitter<string>('初期値');
// ...
}
コンポーネントのngOnInitライフサイクルフックを使用する
コンポーネントの ngOnInit
ライフサイクルフックを使用して、@Output
プロパティを初期化することができます。
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my-component.component.html',
})
export class MyComponent {
@Output() myEvent = new EventEmitter<string>();
ngOnInit() {
this.myEvent.emit('初期値');
}
// ...
}
サービスを使用する
@Output
プロパティの初期値をサービスで管理することができます。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class MyService {
private message = '初期値';
getMessage() {
return this.message;
}
setMessage(message: string) {
this.message = message;
}
}
import { Component, Output, EventEmitter, Inject } from '@angular/core';
import { MyService } from './my.service';
@Component({
selector: 'my-component',
templateUrl: './my-component.component.html',
})
export class MyComponent {
@Output() myEvent = new EventEmitter<string>();
constructor(@Inject(MyService) private myService: MyService) {}
ngOnInit() {
this.myEvent.emit(this.myService.getMessage());
}
// ...
}
RxJSを使用する
RxJS の Subject
を使用して、@Output
プロパティの初期値を管理することができます。
import { Component, Output, EventEmitter, Subject } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'my-component',
templateUrl: './my-component.component.html',
})
export class MyComponent {
@Output() myEvent = new EventEmitter<string>();
private messageSubject = new Subject<string>();
constructor() {}
ngOnInit() {
this.myEvent = this.messageSubject.asObservable();
this.messageSubject.next('初期値');
}
// ...
}
angular click angular-event-emitter