Seçici Çakışması

İki veya daha fazla bileşen aynı element seçicisini kullanıyor. Bir elementle yalnızca tek bir bileşen ilişkilendirilebildiğinden, Angular için belirsizliği önlemek amacıyla seçiciler benzersiz dizeler olmalıdır.

Bu hata, çalışma zamanında tek bir düğüme her biri farklı bir bileşenle eşleşen iki seçici uyguladığınızda veya tek bir düğüme birden fazla bileşenle eşleşen tek bir seçici uyguladığınızda oluşur.

import {Component} from '@angular/core';

@Component({
  selector: '[stroked-button]',
  templateUrl: './stroked-button.html',
})
export class StrokedBtn {}

@Component({
  selector: '[raised-button]',
  templateUrl: './raised-button.html',
})
export class RaisedBtn {}

@Component({
  selector: 'app-root',
  template: `
    <!-- Bu düğümün 2 seçicisi var: stroked-button ve raised-button, her biri farklı bir bileşenle eşleşiyor: StrokedBtnComponent ve RaisedBtnComponent, bu yüzden NG0300 fırlatılacak -->

    <button stroked-button raised-button></button>
  `,
})
export class App {}

Hatayı ayıklama

Aynı seçici tanımını kullandığınız yerleri kod tabanınızda aramak için hata mesajındaki element adını kullanın:

@Component({
  selector: 'YOUR_STRING',
…
})

Her bileşenin benzersiz bir CSS seçicisine sahip olduğundan emin olun. Bu, Angular'ın beklediğiniz bileşeni oluşturmasını garanti edecektir.

Bu seçici etiket adına sahip birden fazla bileşen bulmakta zorlanıyorsanız, Angular Material gibi import edilmiş bileşen kütüphanelerinden gelen bileşenleri kontrol edin. Çakışmaları önlemek için seçicileriniz konusunda en iyi uygulamaları takip ettiğinizden emin olun.