Bileşenin çıktısının olup olmadığını kontrol edin

14

Aşağıdaki bileşeni düşünün:

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

Çağrı ile:

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

selectedChangeDoğru çıktı adı yerine yazdığımı unutmayın selectionChange. Bayrağı strictTemplatesetkinleştirilmiş olan Açısal 9 bana hiç yardımcı olmadı. Sessizce başarısız oldu. İlginç olan şey, eğer aynı şeyi yaparsam @Input, uygulama hataları yakalar ve derlemez.

Varolmayanı "dinlemeye" çalışırsam hata atmanın bir yolu var mı @Output?

angular angular-directive angular9

— dev_054
kaynak

1

önceki Angular sürümlerinde herhangi bir hata oldu mu? Sanırım bu konuda herhangi bir hata

— atmadı

@Aravind hayır, asla hata atmadı. Bunun mümkün olup olmadığını soruyorum. Şimdiden teşekkürler.

— dev_054

neden hata atmak istiyorsun? özel bir ihtiyaç var mı? Sorunu anlamaya çalışıyorum

— Aravind

@Aravind iyi, birçok geliştirici ile bir kurumsal uygulama üzerinde çalışıyorum, bu nedenle bir tür bilgi / uyarı / hataya sahip olmak önemlidir. Bazen birisi @Output()paylaşılan bir lib'deki veya hatta uygulamadaki bir kişiyi değiştirir / kaldırır ve aramaları kaldırmayı unutur ... ve derleme hatalarımız @Input()olmadığından, bizim gibi , bazı sorunlara neyin neden olduğunu tam olarak bulamıyoruz (veya çöp kodunu kodda tutmamak için bile). Birim testleri yardımcı olabilir mi? Belki, ama o zamana kadar henüz mümkün değil.

— dev_054

3

Çünkü atılan hiçbir hata yoktur bağlama olayı açısal içinde birlikte sadece kullanılan @Outputs ve EventEmitters, aynı zamanda dinlemek için DOM olaylar gibi click, keyupvb Hatta dinlemek için kullanılabilecek özel etkinlik . Örneğin, alt bileşende özel bir etkinlik oluşturup yayarsanız:

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

Daha sonra üst bileşende onu adına göre yakalayabilirsiniz:

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

Açısal olarak target.addEventListener (tür, dinleyici [, seçenekler]) kullanılır; dahili olarak (aşağıdaki bağlantılara baktığından emin typeolabilirsiniz ), herhangi bir dize olabilir.

Bu yüzden eşleşen @Outputs bulamazsa herhangi bir istisna atmaz .

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

— Kirill Simonov
kaynak

Hey @Kirill Simonov Cevabınız için teşekkürler! İfadenizi alarak: "Angular'daki olay bağlaması yalnızca @Outputs ve EventEmitters ile değil, aynı zamanda click, keyup, vb gibi DOM olaylarını dinlemek için kullanıldığından, herhangi bir hata oluşmaz. yok olan @Input(): (Girdiler aynı özelliklere sahip olduğunu hatırlamak gibi küresel şey olabilir disabled, idAçısal hataları attı, vs.)? Neden işe yarıyor @Input, ama işe yaramıyor @Output? Ayrıca, bir eksik varsa uyarmak / hata atmak için bir yol bulmaya çalışıyorum @Output.

— dev_054

@ dev_054 bunun nedeni, özellikler kümesinin bir DOM öğesinin, yönergesinin veya bileşeninin mevcut özellikleriyle sınırlı olmasıdır, bu nedenle Angular bu özelliğin var olup olmadığını kolayca kontrol edebilir. Öte yandan, olaylar kullanmakla sınırlıdır addEventListener(göstermek için cevabıma bazı bağlantılar ekleyeceğim). Bence, bilerek yapıldı, böylece geliştiriciler kendi özel olaylarıyla olay bağlamayı kullanabilirler. Derleme zamanında bu davranışı devre dışı bırakmanın bir yolu olmadığına inanıyorum. Bazı IDE'ler (IntelliJ Idea gibi) bu tür yerleri vurgulayabilir ve uyarıları görüntüleyebilir.

— Kirill Simonov

@ dev_054 da bağlayıcı tek yönlü kullanabilirsiniz unutmayın niteliklerini HTML kullanarak [attr.any-attribute]hiçbir hata ya atılacaktır bu durumda,.

— Kirill Simonov

0

Sorununuza doğrudan bir çözüm yoktur, ancak bazı durumlar ele alınabilir.

Düğme clickolayı gibi yerlerin% 100'ünde kullanılan herhangi bir çıktınız varsa, bunu seçicinin bir parçası yapabilirsiniz selector: 'app-test[selectionChange]'. Ayrıca bunu örneğin şöyle yapabilirsiniz: selector: 'app-test[selectionChange]', app-test[click]'anlam clickveya selectionChangegereklidir.
Eğer kodu ve yeniden adlandırma çıktı ie üstlenmeden ise selectionChangehiç selectedChangeo zaman bu seçiciyi kullanabilirsiniz: selector: 'app-test:not([selectionChange])'Kuvvet kullanıcılara güncelleme.

— kemsky
kaynak

-4

VS Kodu kullanıyorsanız, bu uzantıyı yükleyebilirsiniz: Bir yöntem veya özellik tanımlanmadığında Açısal Dil Hizmeti bir uyarı gönderir. Bu uzantı hem çıkışlar hem de girişler (ve attrs, vb.) İle çalışır.

— srgrcp
kaynak

Örneğiniz bir @Input gösterir. Çünkü @OutputAçısal Dil Hizmeti hiçbir işe yaramaz. Soruyu açıklığa kavuşturmak için bana ihtiyacınız olursa bildirin.

— dev_054

Bir @Outputiçin aynı hata mesajını göreceksiniz.

— srgrcp