【问题标题】:Changing nesting within an Angular 2 component template?在 Angular 2 组件模板中更改嵌套?
【发布时间】:2017-01-26 01:17:10
【问题描述】:
我有一个用户可配置的布局,我相信我需要更改每个配置的元素嵌套。我不想要多个模板,因为这将是一项繁琐的维护工作,但我想知道 Angular 2 中是否有某种方法可以定义一个父元素,其子元素将显示天气或不显示父元素。所以如果我有:
<parent>
<child />
</parent>
我想使用某种切换来从显示列表中删除parent 元素,而不会丢失它的child。因此,在切换后,child 将成为 parent 父级的子级。
这可能吗?
【问题讨论】:
标签:
javascript
twitter-bootstrap
angular
【解决方案1】:
如果parent 只是一个 HTML 标记,则可以使用有条件应用的 CSS 类间接完成。
例如,如果parent 是<div>:
模板:
<span [class.myDivClass]="condition">
<child />
</span>
CSS:
.myDivClass {
display: block;
}
如果parent 是一个 Angular 组件,那么向它添加一个禁用其功能的输入而不是尝试取消嵌套它可能更容易。
或者,也可以创建一个具有这种效果的指令。