Question

我的app.component.html中有一个很长的HTML，我想让它在各种条件下显示，同样在同一个HTML中。

我知道这与ng-template和/或ng-container diectives有关，但我阅读并试图理解的文章和官方文档让我更加困惑......他们进入了太多细节，我无法包装我的思绪或你提供的例子并没有说明我的用例。我的用例比那些简单得多。

有人可以告诉我如何使用其中一个指令简化下面的示例结构吗？

假设你有这样的div

<div id='commonHTML'>
   long html here, that you do not want to repeat in your app.component.html
</div>

当条件为真时，您希望显示该长HTML。

但我必须说，这不会削减它;

<div *ngIf="myCondition == 'xyz'">
   <div id='commonHTML'>
      long html here, that you do not want to repeat in your app.component.html
   </div>
</div>

这不会让我为它切割它因为我希望commonHTML在我的页面的不同部分显示...为了简单起见，假设我希望HTML在条件A的HEADER中显示，并且条件B中的LEFT-SIDEBAR，在某些其他条件下，我希望它出现在页脚的上方。所以你明白了......

我的问题是......

你将它包装在ng-Template或ng-Container div中吗？或者你在该div中输入#templateReference，并以某种方式告诉angular使用该引用作为插入？如果是这样，语法是什么？

Answer 1

不是最好的解决方案，但它确实可以解决目前迫在眉睫的需求，并且让我重复100行。

在此处发布以防万一...

<ng-template #commonHTML>100 lines of HTML here</ng-template>

some html....

<div *ngIf="false;else commonHTML;">
    commonHTML will appear here. 
</div>

some more html ...

<div *ngIf="false;else commonHTML;">
    commonHTML will appear here.
<div>

我称之为非最佳解决方案的原因是因为我需要使用“假”部分。

如果有人能让这个解决方案更加帅气，请把它扔进去。我会把它作为公认的答案。

Answer 2

将其划分为不同的组件，然后根据您的条件将其包含在主app.component.html中。

就像你有，然后在你的html中使用条件导入它..

如何在角度2+中简化此app.component.html？

2 个答案: