La définition du titre en tant qu'attribut sur un composant Web déclenche le callstack maximal.

Question

Je travaille sur un composant Web de liaison de navigation. L'une des propriétés que je veux définir sur le composant est le titre. Il semble que cela déclenche d'une manière ou d'une autre une erreur maximale de callstack. Dois-je éviter title du tout? Je pourrais utiliser caption à la place.

Première erreur

Class 'NavLinkCmp' incorrectly extends base class 'HTMLElement'. Property 'title' is private in type 'NavLinkCmp' but not in type 'HTMLElement'.

Deuxième erreur

nav-link.cmp.ts:72 Uncaught RangeError: Maximum call stack size exceeded. 
    at HTMLElement.attributeChangedCallback (nav-link.cmp.ts:72) 

navigateur-cmp.ts

<nav-link-cmp href="${link.url}" fa-icon="${link.icon}" 
    title="${link.title}" description="${link.description}"> 
</nav-link-cmp> 

nav-link-cmp.ts

export class NavLinkCmp extends HTMLElement { 

    // State 
    private title: string; 

    constructor() { 
     super(); 
    } 

    connectedCallback() { 
     this.render(); 
    } 

    render() { 
     this.innerHTML = ` 
     <div class="info"> 
      <div class="title">${this.title}</div> 
     </div> 
     `; 
    } 

    static get observedAttributes() { 
     return ['title']; 
    } 

    attributeChangedCallback(name: string, oldValue: string, newValue: string) { 
     this.title = newValue 
    } 

} 

// Component 
require('./nav-link.cmp.scss'); 
window.customElements.define('nav-link-cmp', NavLinkCmp); 

Answer 1

la boucle infite est causée par le changement de la 'title' valeur dans le attributeChangedCallback. que cette fonction est appelée sur tous les changements sur le titre attribut, elle est appelée sur une plus ...

pourquoi ne pas utiliser le titre de classe parent propriété directement?

Answer 2

Essayez ceci:

attributeChangedCallback(name: string, oldValue: string, newValue: string) { 
    if (oldValue !== newValue) { 
    this.title = newValue; 
    } 
} 

Si oldValue et newValue sont identiques, il n'y a pas besoin de définir la propriété à nouveau. Si vous le faites, cela change l'attribut, puis appelle de nouveau attributeChangedCallback et boucle pour toujours.