Question

我有A组件按钮，该组件在单击时显示表单，B组件按钮显示名称。我想触发ComponentA按钮并在单击componentB按钮时显示表单

componentA HTML

<section>
   <button (click)="toggle()">Click Here To Search</button>

 <div *ngIf="!showInput">
    <input type="text"/><br/>
  <button type="submit">Submit</button>
  <button>Cancel</button>
</div>
</section>

componentA TS

  showInput = true; 
//...
  toggle() {
            this.showInput = !this.showInput;
           }

componentB HTML

<button (click)="toggleText()">Add Fruit</button>

<div *ngIf="showText">Apple</div>

我已经创建了一个示例。请使用此链接

Example Link

Answer 1

在这种情况下，请在服务中使用rxjs BehaviorSubject，以便您的整个应用程序都可以使用该变量并进行相应的更新，如下所示

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class Service {
  toggle: BehaviorSubject<boolean> = new BehaviorSubject(false);
  toggle$ = this.toggle.asObservable();
}

以及您的“我的文字”部分

toggleText() {
  this.showText = !this.showText;
  this.service.toggle.next(this.showText)
}

和您的FormsComponent

showInput;

ngOnInit() {
  this.service.toggle$.subscribe(
    toggle => this.showInput = toggle
  )
}

工作demo

触发按钮在角度4中从另一个组件按钮单击

1 个答案: