Question

要拥有这样的组件：

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>

如果您想使用这样的组件，该怎么办：

{{1}}

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

Answer 1

您在组件标记之间指定的内容称为投影节点，该过程称为node projection。

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

这是来自Web组件和shadow DOM域的术语。 Angular通过ng-content标记支持组件模板内的节点投影。要实现您要执行的操作，您必须在ng-content组件模板中使用copy，等待预计的内容节点初始化，使用@ContentChildren访问此节点并阅读{ {1}}。像这样：

innerText

我使用了TS，但它很容易适应JS。

Answer 2

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

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

模型将是具有公共范围的组件中的对象变量。

model.Property中的任何值更改都将直接内插到DOM。

如果您需要双向绑定（从DOM更新以反映在组件中，下面是语法

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

如何从Angular 2中的投影节点读取innerText

2 个答案: