將標題設置爲Web組件上的屬性觸發最大呼叫堆棧

我正在處理導航鏈接Web組件。我想在組件上設置的其中一個屬性是標題。這似乎是以某種方式觸發最大的callstack錯誤。我應該完全避免title？我可以用caption代替。將標題設置爲Web組件上的屬性觸發最大呼叫堆棧

第一個錯誤

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

二錯誤

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

導航，cmp.ts

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

NAV-鏈路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);

來源

2017-10-04 Adrian Moisa

也許刪除私人？ – nlgn

我不得不添加它，因爲第一個錯誤 –

的infite環由'標題' 在attributeChangedCallback值的變化引起的。因爲這個函數被調用上的標題屬性每一個變化，它叫過過...

爲什麼不能直接使用父類標題財產？

來源

2017-10-04 21:18:50

試試這個：

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

如果oldValue和newValue相同，則沒有必要再設置該屬性。

如果你這樣做，它會改變屬性，然後再調用attributeChangedCallback並永遠循環。

來源

2017-11-22 18:15:11 Intervalia

可能有用。謝謝！ –

將標題設置爲Web組件上的屬性觸發最大呼叫堆棧

回答

相關問題