다음 구성 요소를 고려하십시오.
@Component({
selector: 'app-test'
template: 'Hello!'
}}
export class TestComponent {
@Output() readonly selectionChange = new EventEmitter<SomeTypeHere>();
}
전화로 :
<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>
selectedChange올바른 출력 이름 대신 작성 했습니다 selectionChange. 플래그가 strictTemplates활성화 된 각도 9 는 전혀 도움이되지 않았습니다. 조용히 실패했습니다. 흥미로운 부분은에 대해 똑같은 작업을 수행 @Input하면 앱이 오류를 포착하고 컴파일하지 않는다는 것입니다.
존재하지 않는 것을 “들으려고”하면 에러를 던질 수있는 방법이 @Output있습니까?
답변
때문에 발생합니다 오류가 없습니다 바인딩 이벤트 코너에서 함께뿐만 아니라 사용 @Output의와 EventEmitter의뿐만 아니라 듣고 DOM 이벤트 등 click, keyup등 심지어 듣고 사용할 수있는 사용자 정의 이벤트 . 예를 들어, 하위 구성 요소에서 사용자 정의 이벤트를 작성하고 생성하는 경우 :
constructor (private el: ElementRef) {}
ngOnInit(): void {
const domEvent = new CustomEvent('selectedChange', { custom: true });
this.el.nativeElement.dispatchEvent(domEvent);
}
그런 다음 부모 구성 요소에서 이름으로 잡을 수 있습니다.
<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>
Angular는 target.addEventListener (type, listener [, options])를 사용합니다. 내부적으로 (아래 링크를 확인하여 확인할 type수 있음 ) 어디에서 문자열이 될 수 있습니다.
따라서 일치하는을 찾지 못하면 예외가 발생하지 않습니다 @Output.
답변
문제에 대한 직접적인 해결책은 없지만 일부 경우에 대해서는 다룰 수 있습니다.
- 버튼
click이벤트 와 같은 100 % 장소에서 사용되는 출력이 있으면 선택기의 일부로 만들 수 있습니다selector: 'app-test[selectionChange]'. 또한 예를 들어selector: 'app-test[selectionChange]', app-test[click]'의미click또는selectionChange필수 를 수행 할 수 있습니다 . - 당신은 코드와 이름 변경 출력 예를 리팩토링하는 경우
selectionChange에selectedChange당신은이 셀렉터를 사용할 수 있습니다selector: 'app-test:not([selectionChange])'강제로 사용자에게 업데이트합니다.
답변
VS 코드를 사용하는 경우이 확장을 설치할 수 있습니다 . 메소드 또는 특성이 정의되지 않으면 Angular Language Service 에서 경고가 발생합니다. 이 확장은 출력 및 입력 (및 attrs 등)과 함께 작동합니다.
