如何从角2

Question

投影节点读取的innerText为有这样的组件：

<copy [value]="model.Property"></copy> 

你写：

var copy = ng.core.Component({ 
    selector: 'copy', 
    inputs: ['value'], 
    template: '<button mdTooltip="copy" md-icon-button attr.copy="{{ value }}"><md-icon>content_copy</md-icon></button>' 
}).Class({ 
    constructor: function (element) { 

    } 
}); 

如果你想使用你的组件是这样的：

<copy>{{ model.Property }}</copy> 

我不能让它工作。如何从插值表达式的innerText读取值？

Answer 1

<copy>{{ model.Property }}</copy> 

这是一种单向插值，从组件到HTML的单向值绑定。

model将是您的对象变量在公共范围的组件。

model.Property中的任何值都会直接插入到DOM中。

，如果你需要有双向装订（DOM更新反映在组件，下面是

<copy [(ngModel)] = "model.Property"></copy> 

Answer 2

您组件标签之间的指定什么叫投射节点的语法和过程被称为node projection 。

<copy>{{ model.Property }}</copy> 
     ^^^^^^^^^^^^^^^^^^^^ 
    projected content (nodes) 

这是术语从Web组件和阴影DOM域。角通过ng-content标签支持组件模板中节点的投影。为了达到你想要做你的Wi什么必须在copy组件模板中使用ng-content，等待投影内容节点初始化，使用@ContentChildren访问此节点并阅​​读innerText。像这样的：

@Component({ 
    selector: 'copy', 
    template: '...<ng-content></ng-content>...' 
}) 
class CopyComponent { 
    @ContentChild('v') projected; 

    ngAfterViewInit() { 
    console.log(this.projected.nativeElement.innerText); // 'some value' 
    } 
} 

@Component({ 
    selector: 'parent', 
    templates: '...<copy><span #v>{{prop}}</span></copy>...' 
}) 
class Parent { 
    prop = 'some value'; 
} 

我用TS，但它可以很容易地适应JS。