Question

我的导航栏中有一个“ +”按钮

<app-navbar></app-navbar>

当我单击要显示的组件时

<app-stepper></app-stepper>

这是我的主要父app.component.html

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

Answer 1

您可以在app-navbar按钮单击时发出的+中设置event emitter。然后将此事件绑定到app-stepper显示/隐藏切换器。

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>

在这里，无论app-stepper发射器发出的事件如何，每次单击+时都切换onPlusClicked。如果希望将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>内部，创建一个公共属性，该属性将在服务内部返回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所示实现它。

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

在角度9的一个组件上单击按钮时显示组件

3 个答案: