3

我正在尝试自学 angular2。我试图构建组件“触发调整大小”，我想将其呈现为：

<a class="hidden-xs" href="">
    <em class="fa fa-navicon"></em>
</a>

而不是：

<trigger-resize>

   <a class="hidden-xs" href="">
      <em class="fa fa-navicon"></em>
   </a>
</trigger-resize>

（我不希望自定义选择器呈现）

在角度1中。我知道它可以通过“replace：true”选项来实现，但是有可能在angular2中实现吗？

亲切的问候

4

3 回答 3

5

一种方法是使用属性

<a triggerResize class="hidden-xs" href=""></a>

其中有一个组件

@Component({
    selector : 'a[triggerResize]', //select all <a> tags with triggerResize attribute
    template : '<em class="fa fa-navicon"></em>'
})

CamelCase 属性现在是 angular2 中自定义属性的正确语法

于 2015-12-27T12:28:20.507 回答
1

您可以将属性<a>用作选择器而不是标签<a trigger-resize class="hidden-xs"... >，然后在组件注释[trigger-resize]中用作选择器。

<a trigger-resize class="hidden-xs" href="">
    <em class="fa fa-navicon"></em>
</a>

@Component({
    selector : '[triggerResize]'
    template : '<em class="fa fa-navicon"></em>'
})

这对于需要特定标签名称的其他情况也非常有用，例如<li>inside<ul>或<tr>inside `

<ul>
  <li myLi></li>
</ul>

于 2015-12-27T12:25:56.183 回答
1

该问题的直接答案是“否”——您的自定义元素/选择器将位于 HTML 中。引用Angular 1 到 Angular 2 升级策略文档：

Angular 2 不支持替换其宿主元素的指令（替换：Angular 1 中的 true 指令）。在许多情况下，这些指令可以升级为常规组件指令。

也就是说，对于您的特定用例，正如其他人已经提到的那样，使用属性选择器的组件可以工作。

也可以看看

于 2015-12-28T22:34:48.040 回答