angular - 如何将不同的模板变量传递给angular2中的一个按钮？

Question

我的组件中有两个以上的模板变量，就像吹一样：

<div #div1>
    <div #part1 [hidden]="true">
    </div>
    <div #part2>
    </div>
</div>
<div #div2>
    <div #part3 [hidden]="true">
    </div>
    <div #part4>
    </div>
 </div>
<button (click)="showDiv(div1,div2)"></button>

我想点击按钮显示part1和隐藏part2，和part3和part4一样，但它只是一个按钮，我现在可以做的是用part1和part2替换div1和div2，那么part3和part4呢？另一个按钮？但真正的要求是超过两个 div，也许是十几个，所以，有人可以帮忙吗？非常感谢。

Answer 1

要解决您的问题，您可以使用ngContainerand ngTemplate。

使用ngContainer和ngTemplate：

HTML：

<div> <!-- Div 1 -->
  <ng-container *ngIf="isPartVisible(1); then part1; else part2"></ng-container> 
  <ng-template #part1><div>Part 1</div></ng-template>
  <ng-template #part2><div>Part 2</div></ng-template>
</div>
<!-- Other parts here. -->

JavaScript：

var partVisibilities = {};
partVisibilities["1"] = true;

public isPartVisible(part) {
    return partVisiblities[part] == true; 
    // If you haven't set the visibility setting for a part yet, then it will not show as undefined is falsy in JS.
}

Answer 2

在您的组件内，您可以添加类似这样的内容

`

constructor(private renderer: Renderer2, private el: ElementRef) {}
showDiv(){
this.renderer.setStyle(
    this.el.nativeElement,
    'display:None',
    'block'
  );
}

`