매개 변수 전달/DART

Question

에서 사용자 지정 요소에 입력 데이터 나 사용자 정의 요소를 생성하고 데이터/매개 변수를 보낼 :

내 요소 코드는 다음과 같습니다

class SaveBtn extends HtmlElement { 
    static final tag = 'save-button'; 
    factory SaveBtn()=>new Element.tag(tag); 

    SaveBtn.created() : super.created() { 
    // Create a Shadow Root 
    var shadow = this.createShadowRoot(); 
// Create a standard element and set it's attributes. 
var btn = new ButtonElement(); 
... 
btn.text= this.getAttribute('data-name'); 


shadow.nodes.add(btn); 

    Element launchElement(){ 
    return (shadow); 
    } 

    } 
} 

아래의 코드 html 파일에서 완벽하게 작동했습니다 :

<save-button data-name='save orders'></save-button> 

아래 코드를 사용하려면 사용자 정의 요소 코드에서 무엇을 조정해야합니까?

new SaveBtn('save orders') 

Answer 1

name는 선택적 인수입니다. 값을 전달하면 버튼의 text 속성에 사용됩니다.
요소 클래스의 필드 (name)로 전달하고 attached의 버튼으로 설정합니다.
data-xxx 특성을 사용할 때 dataset 게터를 사용할 수 있습니다.
다른 코드도 약간 변경되었습니다. 나는 요소가 이미 올바르게 업그레이드 되었기 때문에 attached이 속성에 액세스하기에 더 좋은 장소라고 생각합니다. 솔루션 아래

SaveBtn({String name, String width}) => (new Element.tag(tag) as SaveBtn) 
    ..name = name 
    ..style.width=width; 

class SaveBtn extends HtmlElement { 
    static final tag = 'save-button'; 

    factory SaveBtn([String name]) => (new Element.tag(tag) as SaveBtn)..name = name; 

    ButtonElement innerButton; 
    ShadowRoot shadow; 

    SaveBtn.created() : super.created() { 
    // Create a Shadow Root 
    var shadow = this.createShadowRoot(); 
    // Create a standard element and set it's attributes. 
    innerButton = new ButtonElement(); 
    shadow.nodes.add(innerButton); 
    } 

    String name; 

    @override 
    void attached() { 
    super.attached(); 
    innerButton.text = name != null ? name : this.dataset['name']; 
    } 
} 

작동 입증했다.

factory SaveBtn() => new Element.tag(tag) 
    String name, width; 

    @override 
    void attached() { 
    super.attached(); 
    innerButton.text = name != null ? name : this.dataset['name'] 
    ..style.width=width; 
    } 

전화로 아이템 :이 게시 된 답변을 읽기 전에 저와 함께 일한 또 다른 솔루션입니다

var btn = new SaveBtn()..name='save'..width='100%'; 

Answer 2

당신은 단순히 너무 data-name 속성을 설정하는 이것에 대한 새로운 생성자를 추가 할 수 있습니다

class SaveBtn { 
    // ... 
    factory SaveBtn(String label) { 
    var btn = new Element.tag(tag); 
    btn.setAttribute('data-name', label); // Set properties/call methods here 
    return btn; 
    } 
    // ... 
} 

Answer 3

, 나는 @Gunter 답변을 좋아하고 그것을 적용됩니다.

class SaveBtn extends HtmlElement { 
    static final tag = 'save-button'; 
    factory SaveBtn()=>new Element.tag(tag); 

    var shadow, btn; 

    SaveBtn.created() : super.created() { 
    shadow = this.createShadowRoot(); 

    btn = new ButtonElement() 
     ..text="save" 
     ..style.height= '20px' 
     ..style.borderBottom='1px solid #D1DBE9'; 

    btn.text = this.getAttribute('data-name'); 

    shadow.nodes..add(label)..add(btn); 
    } 

    Element launchElement(name){ 
    btn.text= name; 
    return (shadow); 
    } 
} 

와라는 요소로 : 나는 하나 개 이상의 선택적 매개 변수를 전달하려면, 내가 공장을 시도 무엇

var btn=new SaveBtn()..launchElement('click me');