Angular 角度2单击时隐藏子组件

我想在单击某个单选按钮时隐藏整个组件。 子节点选择器包括：应用程序节点详细信息完整和应用程序节点树图。以下是我的父模板代码：

<div class="displaySwitch">
  <input (click)="fullview.hidden = !fullview.hidden" checked type="radio" name="displayType" value="diagram"> Full View
  <input (click)="diagram.hidden = !diagram.hidden" type="radio" name="displayType" value="fullview"> Diagram
</div>

全景
图解

这些是附加（单击）的单选按钮

现在在其他div中，我有了我的子组件：

  <div class="nodeDetails" [ngStyle]="nodeDetailsStyle">
    <app-node-details-full #fullview</app-node-details-full>
    <app-node-tree-diagram #diagram></app-node-tree-diagram>
  </div>

或

问题是无法从模板内部设置变量

您有以下行：

(click)="fullview.hidden = !fullview.hidden"

您需要将其提取到一个方法中

hide(){
    fullview.hidden = !fullview.hidden
}

然后在单击时触发此方法：

(click)="hide()"

编辑：
我注意到您实际上正在尝试设置一个模板变量

模板变量只存在于模板中，您不能通过JS访问它们（因为它们被编译成HTML），为了访问它们，您需要使用

尽管我不推荐这种方法

相反，我会用组件变量和
ngIf
来控制可见性，因为我认为，在尝试使用变量的单选按钮之后定义了变量
\fullview
和
\diagram
。我认为您最好使用一个私有变量并捕获所选单选按钮的值。然后使用
*ngIf
将其关闭

例如：

checkboxValue: string;

<div class="displaySwitch">
  <input checked type="radio" name="displayType" [(ngModel)]="checkboxValue" value="fullView"> Full View
  <input type="radio" name="displayType" [(ngModel)]="checkboxValue" value="diagram"> Diagram
</div>

<div class="nodeDetails" [ngStyle]="nodeDetailsStyle">
  <app-node-details-full *ngIf="checkboxValue == 'fullView'"</app-node-details-full>
  <app-node-tree-diagram *ngIf="checkboxValue == 'diagram"></app-node-tree-diagram>
</div>

checkboxValue:字符串；
全景
图解
(click)="hide()"

checkboxValue: string;

<div class="displaySwitch">
  <input checked type="radio" name="displayType" [(ngModel)]="checkboxValue" value="fullView"> Full View
  <input type="radio" name="displayType" [(ngModel)]="checkboxValue" value="diagram"> Diagram
</div>

<div class="nodeDetails" [ngStyle]="nodeDetailsStyle">
  <app-node-details-full *ngIf="checkboxValue == 'fullView'"</app-node-details-full>
  <app-node-tree-diagram *ngIf="checkboxValue == 'diagram"></app-node-tree-diagram>
</div>