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

在您的组件中，您可以添加类似

的内容

`

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

`

Answer 2

要解决您的问题，您可以使用ngContainer和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.
}

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

2 个答案: