在 angular 9 中的一个组件单击按钮时显示组件

Question

我在导航栏里面有一个“+”按钮

<app-navbar></app-navbar>

当我点击它时我想显示组件

<app-stepper></app-stepper>

这是我的主parentapp.component.html

  <app-navbar></app-navbar>
  <app-stepper></app-stepper>
  <app-test></app-test>

Answer 1

您可以在单击 + 按钮时在 app-navbar 中设置一个 event emitter。然后将此事件绑定到 app-stepper show/hide 切换器。

navbar.component.ts

export class NavbarComponent {
  @Output() onPlusClick = new EventEmitter<boolean>();

  plusClick() {
    ...
    this.onPlusClick.emit(true);
  }
}

navbar.component.html

<button (mouseup)="plusClick()">+</button>
...

app.component.ts

export class AppComponent {
  toggleStepper = false;
  ...
}

app.component.html

<app-navbar (onPlusClick)="toggleStepper = !toggleStepper"></app-navbar>
<app-stepper *ngIf="toggleStepper"></app-stepper>

在这里，无论 onPlusClicked 发射器发出什么事件，每次单击 + 时我都会切换 app-stepper。如果您希望将 toggleStepper 直接绑定到发出的事件，您可以通过在 navbar 组件中发出正确的布尔值并将其直接分配给 toggleStepper 变量来实现。

navbar.component.ts

plusClicked() {
  this.onPlusClicked.emit(true);
  // or `this.onPlusClicked.emit(false)` based on some condition 
}

app.component.html

<!-- here the `event$` is either `true` or `false` -->
<app-navbar (onPlusClick)="toggleStepper = $event"></app-navbar>
<app-stepper *ngIf="toggleStepper"></app-stepper>

Answer 2

您可以创建一个同时注入 <app> 和 <app-navbar>

的共享服务

服务看起来像这样：

@Injectable({
  providedIn: 'root',
})
export class SharedService{

  public showStepper: boolean = false;
}

它包含一个布尔值，表示是否应显示步进器。

在 <app-navbar> 内部，当用户单击“+”时，将 showStepper 设置为 true。

接下来，在 <app> 内部，创建一个 public 属性服务内部 returns showStepper 的值，如下所示：

public get showStepper(): boolean {
    return this._sharedService.showStepper;
    // _sharedService is the injected Service
}

现在在 <app.component.html> 中，使用 *ngIf directive 有条件地显示您的步进器组件：

<app-stepper *ngIf="showStepper"></app-stepper>

Answer 3

你可以按照this stackbliz的方式实现。

您需要在导航栏组件中使用一个输出变量，并在 + 按钮单击时发出一个值。在 app component 中，您需要监视导航栏组件发出的事件并使用该事件值来显示或隐藏 stepper component。

在 angular 9 中的一个组件单击按钮时显示组件

Show component on button click from one component in angular 9

angular

angular9