Как передать разные переменные шаблона одной кнопке в angular2?

Question

В моем компоненте более двух шаблонных переменных, например, blow:

<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, но это всего лишь одна кнопка. Теперь я могу заменить div1 и div2 на part1 и part2, а как насчет part3 и part4? Еще одна кнопка? Но реальная просьба - больше двух делений, может быть, дюжина, так что, кто-нибудь может помочь? Большое спасибо.

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.
}