Question

我想在单击某个单选按钮时隐藏整个组件。子节点选择器是：app-node-details-full和app-node-tree-diagram。这是我的父模板代码：

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

这两个div都包含在一个main中，如果这对你来说意味着什么。我究竟做错了什么？每次我点击单选按钮我都会得到异常

o.diagram未定义

或

o.fullview未定义

Answer 1

问题是您无法从模板中设置变量

您有以下一行：

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

您需要将其提取到方法

中

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

然后点击触发此方法：

(click)="hide()"

编辑：

我注意到你实际上是在尝试设置模板变量。

模板变量仅存在于模板中，您无法通过JS访问它们（因为它们被编译成HTML）以便访问它们，您需要使用@ViewChild

虽然我不推荐这种做法。

相反 - 我会用组件变量控制可见性并ngIf

Answer 2

*ngIf="myVar"

或

[hidden]="!myVar"

Answer 3

您收到的是undefined，因为我认为您的变量#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>

Angular 2单击时隐藏子组件

3 个答案:

编辑：