Question

我正在尝试创建一个Angular组件并转换组件的内部HTML，但内部HTML的标记似乎没有编译。我的用例是该组件具有我想以多种方式使用的属性绑定，因此模板永远不会完全相同。

例如，假设我有以下简单的控制器：

class ComponentCtrl {
    $onInit() {
        this.variable = 'hello world';
    }
}

let MyComponent = {
    controller: ComponentCtrl
};

app.component('myComponent', MyComponent);

我想要以下HTML：

<my-component>
    <div style="color: green;">{{ $ctrl.variable }}</div>
</my-component>
<my-component>
    <div style="color: red;">{{ $ctrl.variable }}</div>
</my-component>

渲染为：

<div style="color: green;">hello world</div>
<div style="color: red;">hello world</div>

但是，现在它只渲染为：

<div style="color: green;"></div>
<div style="color: red;"></div>

没有评估标记。

我做错了吗？

Answer 1

你是否在html的{{ }}内写了正确的控制器名称？你写了controller: ComponentCtrl然后{{ $ctrl.variable }}。它看起来必须具有相同的名称

Answer 2

默认情况下不进行转换，您必须在组件上指定必须进行转换。此外，您没有在您的模板上指定它应该被捕获的位置。因此，您的组件应如下所示：

let MyComponent = {
    transclude: true, // tell angular to transclude it
    template: '<ng-transclude></ng-transclude>', // tell where it will be transcluded
    controller: ComponentCtrl
};

app.component('myComponent', MyComponent);

但是，如何在评论中说出，组件范围始终是孤立的。因此，您无法从组件外部访问{{ $ctrl.variable }}。

Answer 3

我认为问题来自{{ $ctrl.variable }}。实际上$ ctrl尝试链接父控制器而不是组件的控制器。

如果您想与组件的控制器进行交互，则需要使用一些参数。

Answer 4

被排除的内容的作用域具有$ parent属性，该属性始终指向宿主组件的作用域。

所以您可以做这样的事情-

    form = document.createElement("form");
   form.action = url;
   form.method = verb;
   form.target = target || "_blank";
   if (_data) {
       var data = _data.split("&")
       for (var key = 0; key < data.length; key++) {
           var input = document.createElement("textarea");
           input.name = data[key].split("=")[0];
           input.value = data[key].split("=")[1];
           form.appendChild(input);
       }
   }
   form.style.display = 'none';
   document.body.appendChild(form);
   form.submit();

使用$ parent属性的插入链接-http://run.plnkr.co/preview/ckdwiuzlb00073b661a7blt3f/

具有转换标记的角度组件

4 个答案: