Bileşen ID oluşum çakışmasını nasıl düzeltebilirim

Angular 16'dan itibaren, framework bileşenler için tutarlı ID'ler oluşturmayı deniyor. Ancak, süsleyici ve bileşen sınıfı aynı görünüyorsa bir çakışma meydana gelebilir.

Örneğin, aşağıdaki kod 2 farklı sınıf içeriyor ve bu, benzerlikleri nedeniyle bir çakışmaya neden olacaktır. Bir bileşeni bir mock ve boş bir şablon ile değiştirmek istediğimizde bu kolayca tekrar üretilebilir:

@Component({
  selector: 'target',
  template: 'complex-template',
})
class TargetComponent {}

@Component({
  selector: 'target',
  template: 'empty-template',
})
class MockTargetComponent {}

Hata fırlatır

Bileşen ID oluşum çakışması tespit edildi. 'Target1Component' ve 'MockTarget1Component' bileşenleri ile 'target' seçici için aynı bileşen ID'si oluşturuldu. Bunu düzeltmek için, bu bileşenlerden birinin seçicisini değiştirebilir veya farklı bir ID zorlamak için ekstra bir host niteliği ekleyebilirsiniz.

Önerilen düzeltme

Hatanın önerdiği gibi, çakışmayı düzeltmek için eşsiz bir host niteliği ekleyebiliriz. Bunun için, @Component süsleyicisinin host özelliğini eşsiz bir değer ile kullanmalıyız. Örneğin, sınıfın adını kullanabiliriz:

@Component({
  selector: 'target',
  template: 'complex-template',
  host: {'collision-id': 'Target1Component'},
})
export class Target1Component {}

@Component({
  selector: 'target',
  template: 'empty-template',
  host: {'collision-id': 'MockTarget1Component'},
})
export class MockTarget1Component {}

Rastgele sayı üreticileri kullanmayın

Bileşen ID'sinin fikri, herhangi bir koşulda aynı bileşeni temsil etmektir: ithalatlarındaki konumuna veya diğer faktörlere rağmen. Bu nedenle, Bileşen ID'si tahmin edilebilir olmalıdır. Lütfen, Math.random() gibi rastgele sayı üreticileri kullanmayın.

Alternatif düzeltme

host yaklaşımını beğenmiyorsanız, Bileşen ID çakışmasını önlemek için eşsiz bir ada sahip bir stub yöntemi ekleyebilirsiniz. Örneğin, mock sınıfında avoidCollisionMockTarget1 ekleyebiliriz:

@Component({
  selector: 'target',
  template: 'complex-template',
})
export class Target1Component {}

@Component({
  selector: 'target',
  template: 'empty-template',
})
export class MockTarget1Component {
  public avoidCollisionMockTarget1() {}
}

Ve bu, Bileşen ID çakışmasını düzeltecektir.