다트 : 템플릿이 끝날 때까지 기다리십시오.

Question

템플릿이있는 HTML과 바인딩 된 템플릿을 변경하는 기능이 있습니다. 기능은 다음과 같습니다

void onHover(Event e, var detail, Node sender) { 
    this.querySelector('#tempToBind').setAttribute("ref", "Btn2"); 

    this.querySelector('#Btn2').onMouseLeave.listen((e) { 
    this.querySelector('#tempToBind').setAttribute("ref", "Btn1"); 
} 

마우스가 인 btn1를 입력하고 마우스 Btn2 잎 경우, 인 btn1가 다시 표시해야 할 때 Btn2이 표시되어야한다. Btn2에 대한 쿼리가 항상 null이고 템플릿이로드가 완료되지 않았기 때문에 그 것으로 추측됩니다. 템플릿이로드 완료되면 콜백을받을 수있는 방법이 있습니까?

템플릿은 다음과 같이 :

<template> 
<!-- some content here --> 
    <template id="tempToBind" bind ref="Btn1"></template> 

<template> 

<template id="Btn1"> 
<div><button>1</button><div> 
</template> 
<template id="Btn2"> 
<div><button>2</button><div> 
</template> 

Answer 1

를 지금까지 내가 거기에 어떤 이벤트가 없지만 일반적으로해야 new Future(() => ...) 또는 scheduleMicrotask에 의해 실행을 지연 알고있다.

는

void onHover(Event e, var detail, Node sender) { 
    this.querySelector('#tempToBind').setAttribute("ref", "Btn2"); 
    scheduleMicrotask(() { 
    this.querySelector('#Btn2').onMouseLeave.listen((e) { 
    this.querySelector('#tempToBind').setAttribute("ref", "Btn1"); 
    }); 
} 


void onHover(Event e, var detail, Node sender) { 
    this.querySelector('#tempToBind').setAttribute("ref", "Btn2"); 
    new Future(() { 
    this.querySelector('#Btn2').onMouseLeave.listen((e) { 
    this.querySelector('#tempToBind').setAttribute("ref", "Btn1"); 
    }); 
}