각도 다트 하위 구성 요소 범위

Question

구성 요소 이벤트를 부모/자식 구성 요소로 제한하고 거품 발생을 방지하는 방법.

ParentComponent.dart

@Component(
    selector: "parent-component", 
    template: '<div>parent value: {{value}}<content></content></div>', 
    useShadowDom: false 
) 
class ParentComponent implements ScopeAware{ 
    Scope _scope; 

    @NgAttr('value') 
    String value; 

    void set scope(Scope scope){ 
    _scope = scope; 
    _scope.on('select-child').listen((ScopeEvent event){ 
     value = event.data['value']; 
    }); 
    } 
} 

ChildComponent.dart

@Component(
    selector: "child-component", 
    template: '<div ng-click="select()">child: {{value}}</div>', 
    useShadowDom: false 
) 
class ChildComponent implements ScopeAware{ 
    Scope _scope; 

    @NgAttr('value') 
    String value; 

    void select(){ 
    _scope.parentScope.broadcast('select-child', { 
     'value': value 
    }); 
    } 

    void set scope(Scope scope){ 
    _scope = scope; 
    } 
} 

하나가 아이 컴퍼넌트 클릭의 :

내가 가지고있는 다음과 같은 두 가지 구성 요소

부모가 값을 업데이트 함 이자형. 내가 더 부모 구성 요소가있을 때

그러나 그들은 모두 같은 차일을 듣고 :

<!-- Parent 1 --> 
<parent-component> 
    <child-component value="foo"></child-component> 
    <child-component value="bar"></child-component> 
</parent-component> 

<!-- Parent 2 --> 
<parent-component> 
    <child-component value="herp"></child-component> 
    <child-component value="derp"></child-component> 
</parent-component> 

내가 상위 1 두 부모 구성 요소의 foo는 아이 요소를 클릭하면 'foo는'자신의 값을 변경합니다.

나는 이미 emit, broadcast로 연주 해 보았습니다. 나는 방송이 거품 노드를 아래쪽으로 거품을 내며 거품을 내뿜는 것을 안다. 나는 또한 usind "scope.createChild()"시도했지만 뭔가 놓친 것 같아요.

부모에게만 보이고 자식에게는 보이게 범위를 만들 수 있습니까? 또는 브로드 캐스트를 올바르게 사용하는 방법은 무엇입니까?

내가 문서를 이해

바로 내가 아이 구성 요소의 발광()하지 parentNode.broadcast()를 사용해야하지만 난 그것을

Answer 1

좋은 질문을 동작하지 않습니다. 구성 요소가 새로운 범위를 만들지 만 그 범위는 shadowDom (템플릿의 HTML : 주석)에서만 사용할 수 있다는 혼란이 있습니다.

예를 들어 상위 2 개와 하위 4 개 모두 6 개 구성 요소는 루트 범위의 하위 범위 인 범위를 만듭니다. 따라서 parentScope.broadcast를 호출하면 rootScope에서 6 개의 범위로 이벤트가 실행됩니다.

원하는 동작을 얻는 가장 쉬운 방법은 ParentComponent를 ChildComponent에 직접 삽입하는 것입니다. 부모 구성 요소는 light DOM과 shadow DOM의 구성 요소에 모두 삽입 할 수 있습니다.

class ChildComponent implements ScopeAware { 
    ParentComponent _p;  
    ChildComponent(this._p); 
    void select(){ 
    _p.setValue(value); 
    } 
    ... 
} 

유일한 단점은 그 두 개의 구성 요소가보다 긴밀하게 자신의 응용 프로그램을 모두 제작하는 경우 확인되는, 서로 결합하게됩니다.