Kiểm tra xem đầu ra có trên thành phần không

Hãy xem xét các thành phần sau:

@Component({
  selector: 'app-test'
  template: 'Hello!'
}}
export class TestComponent {
  @Output() readonly selectionChange = new EventEmitter<SomeTypeHere>();
}

Với cuộc gọi:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

Lưu ý rằng tôi đã viết selectedChangethay vì tên đầu ra chính xác selectionChange. Angular 9 với cờ strictTemplatesđược kích hoạt không giúp tôi chút nào. Nó thất bại âm thầm. Phần thú vị là nếu tôi làm điều tương tự @Input, ứng dụng sẽ bắt lỗi và không biên dịch.

Có cách nào để đưa ra một lỗi nếu tôi cố gắng "lắng nghe" một cách không tồn tại @Output?

Không có lỗi ném vì các sự kiện ràng buộc trong góc được sử dụng không chỉ với @Outputs và EventEmitters, mà còn để lắng nghe những sự kiện DOM như click, keyupvv Nó thậm chí có thể được sử dụng để lắng nghe sự kiện tùy chỉnh . Ví dụ: nếu bạn tạo và phát ra một sự kiện tùy chỉnh trong thành phần con:

constructor (private el: ElementRef) {}
ngOnInit(): void {
    const domEvent = new CustomEvent('selectedChange', { custom: true });
    this.el.nativeElement.dispatchEvent(domEvent);
}

Sau đó, trong thành phần cha mẹ, bạn có thể bắt nó bằng tên của nó:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

Angular sử dụng target.addEventListener (loại, người nghe [, tùy chọn]); bên trong (bạn có thể chắc chắn rằng nó nhìn vào các liên kết bên dưới), nơi typecó thể là bất kỳ chuỗi nào.

Đó là lý do tại sao nó không ném bất kỳ ngoại lệ nào nếu nó không tìm thấy @Outputs phù hợp .

lắng ngheEutOutputs

Mặc địnhDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

Không có giải pháp trực tiếp cho vấn đề của bạn, tuy nhiên một số trường hợp có thể được bảo hiểm.

1. Nếu bạn có bất kỳ đầu ra nào được sử dụng ở 100% các vị trí như clicksự kiện nút thì bạn có thể biến nó thành một phần của bộ chọn tức là selector: 'app-test[selectionChange]'. Ngoài ra, bạn có thể làm điều này ví dụ: selector: 'app-test[selectionChange]', app-test[click]'có nghĩa clickhoặc selectionChangeđược yêu cầu.
2. Nếu bạn đang refactoring mã và đầu ra đổi tên ví dụ selectionChangeđể selectedChangesau đó bạn có thể sử dụng bộ chọn này: selector: 'app-test:not([selectionChange])'cho người dùng vũ lực để cập nhật.

Nếu bạn đang sử dụng Mã VS, bạn có thể cài đặt tiện ích mở rộng này: Dịch vụ ngôn ngữ góc sẽ đưa ra cảnh báo khi phương thức hoặc thuộc tính không được xác định. Tiện ích mở rộng này hoạt động với cả, đầu ra và đầu vào (và attrs, v.v ...).