Показывать компонент при нажатии кнопки из одного компонента в angular 9 - PullRequest
Новая
       3

Показывать компонент при нажатии кнопки из одного компонента в angular 9

0 голосов
/ 19 июня 2020

У меня есть одна кнопка «+» на панели навигации, которая находится внутри 

<app-navbar></app-navbar>

, когда я нажимаю на нее, я хочу показать компонент 

<app-stepper></app-stepper>

Это мое основное родительское приложение. компонент. html

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

Ответы [ 3 ]

1 голос
/ 19 июня 2020

Вы можете создать общий сервис, который будет внедрен как в <app>, так и в <app-navbar>

. Сервис будет выглядеть примерно так: 

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

  public showStepper: boolean = false;
}

Он содержит логическое значение, которое говорит если шаговый двигатель должен отображаться или нет.

Внутри <app-navbar>, когда пользователь нажимает '+', установите showStepper на true.

Далее, внутри <app>, создайте свойство publi c, которое возвращает значение 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>

1 голос
/ 19 июня 2020

Вы можете настроить эмиттер событий в app-navbar, который генерируется при нажатии кнопки +. Затем свяжите это событие с переключателем 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. Если вы wi sh привязываете 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>
0 голосов
/ 19 июня 2020

Вы можете достичь этого, как показано в this stackbliz .

Вам нужно использовать выходную переменную в компоненте панели навигации и выдавать значение при нажатии кнопки +. В app component вам нужно следить за событием, испускаемым компонентом навигационной панели, и использовать это значение события, чтобы показать или скрыть stepper component.

...