컴포넌트에 출력이 있는지 확인

14

다음 구성 요소를 고려하십시오.

@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있습니까?

angular angular-directive angular9

— dev_054
소스

1

이전 버전의 Angular에 오류가 있습니까? 나는 그것에 대해 어떤 오류도

— 던지지

@Aravind 아니오, 결코 오류를 던지지 않았습니다. 가능한지 묻고 있습니다. 미리 감사드립니다.

— dev_054

왜 오류를 던지겠습니까? 특정한 필요가 있습니까? 귀하의 질문을 이해하려고합니다

— Aravind

@Aravind 글쎄, 나는 많은 개발자들과 엔터프라이즈 응용 프로그램을 작업하고 있으므로 일종의 정보 / 경고 / 오류가 있어야합니다. 때로는 누군가 @Output()가 공유 라이브러리 또는 앱에서 변경 / 제거 하고 호출 을 제거하는 것을 잊어 버렸습니다 ... 우리와 같은 컴파일 오류 @Input()가 없으므로 특정 문제의 원인을 정확하게 찾을 수 없습니다 (또는 쓰레기를 코드에 보관하지 않기 위해). 단위 테스트가 도움이 될 수 있습니까? 어쩌면 그 당시에는 아직 불가능했을 것입니다.

— dev_054

3

때문에 발생합니다 오류가 없습니다 바인딩 이벤트 코너에서 함께뿐만 아니라 사용 @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.

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

— 키릴 시모노 프
소스

@Kirill Simonov 님의 답변에 감사드립니다! "Angular의 이벤트 바인딩이 @Outputs 및 EventEmitters와 함께 사용될뿐만 아니라 click, keyup 등과 같은 DOM 이벤트를 수신하기 때문에 오류가 발생하지 않습니다." inexistent @Input(): (입력이 같은 특성을 가지고 있음을 기억 같은 세계적인 것이 될 수 있습니다 disabled, id각도 오류를 던졌다 등)? 왜 작동 @Input하지만 작동 하지 @Output않습니까? 또한, 존재하지 않는 경우 오류를 경고 / throw하는 방법을 찾고 @Output있습니다.

— dev_054

@ dev_054 이것은 속성 집합이 DOM 요소, 지시문 또는 구성 요소의 기존 속성에 의해 제한되기 때문에 Angular는이 속성이 존재하는지 여부를 쉽게 확인할 수 있습니다. 반면에, 이벤트는 다음을 사용하여 바인딩됩니다 addEventListener(나는 그것을 보여주기 위해 답변에 링크를 추가 할 것입니다). 의도적으로 수행되었으므로 개발자는 자신의 사용자 정의 이벤트와 함께 이벤트 바인딩을 사용할 수 있습니다. 컴파일 타임 에이 동작을 비활성화 할 수있는 방법이 없다고 생각합니다. IntelliJ Idea와 같은 일부 IDE는 이러한 위치를 강조 표시하고 경고를 표시 할 수 있습니다.

— 키릴 시모노 프

@ dev_054는를 사용하여 HTML 속성에 단방향 바인딩을 사용할 수도 있다는 것을 기억하십시오 [attr.any-attribute].이 경우 오류가 발생하지 않습니다.

— 키릴 시모노 프

0

문제에 대한 직접적인 해결책은 없지만 일부 경우에 대해서는 다룰 수 있습니다.

버튼 click이벤트 와 같은 100 % 장소에서 사용되는 출력이 있으면 선택기의 일부로 만들 수 있습니다 selector: 'app-test[selectionChange]'. 또한 예를 들어 selector: 'app-test[selectionChange]', app-test[click]'의미 click또는 selectionChange필수 를 수행 할 수 있습니다 .
당신은 코드와 이름 변경 출력 예를 리팩토링하는 경우 selectionChange에 selectedChange당신은이 셀렉터를 사용할 수 있습니다 selector: 'app-test:not([selectionChange])'강제로 사용자에게 업데이트합니다.

— 켐 스키
소스

-4

VS 코드를 사용하는 경우이 확장을 설치할 수 있습니다 . 메소드 또는 특성이 정의되지 않으면 Angular Language Service 에서 경고가 발생합니다. 이 확장은 출력 및 입력 (및 attrs 등)과 함께 작동합니다.

— srgrcp
소스

샘플은 @Input을 보여줍니다. 를 들어 @Output, 각도 언어 서비스는 아무것도 도움이되지 않습니다. 궁금한 점이 있으면 알려주세요.

— dev_054

를 들어 @Output같은 오류 메시지가 표시됩니다.

— srgrcp