如果按钮在组件A中并且元素在组件B中，则单击时显示元素

Question

我想在单击按钮时显示div，但它们都位于不同的组件中。那么如何在组件之间进行交互。

我对angular4还是很陌生，所以如果有更好的方法可以做到，我将非常感激

这是html的两个不同组成部分。

  

button.component.html

<button class="btn btn-primary" [hidden]="hidden" 
      (click)="hidden = true ">Show Age</button>

  

text.component.html

     </div> AGE </div>
    <div *ngIf="hidden"> 22 </div>

添加屏幕截图

Answer 1

您的组件A 应该具有输出事件：

@Output() change = new EventEmitter();
// ...
onClick(){
  this.change.emit();
}

然后单击按钮发出它：

<button (click)="onClick()">Show Age</button>

您的父组件（=包含 A 和 B 的组件）应该注意hidden的值，将其传递给组件B ，并在从组件A 接收到change事件时进行更改。

父组件HTML：

<app-component-a (change)="hidden = !hidden"></app-component-a>
<app-component-b [hidden]="hidden"></app-component-b>

父组件TS：

hidden:boolean = false;

组件B TS：

@Input() hidden:boolean = false;