Угловые и радиокнопки - Скрыть div на основе выбора и выходного значения для другого компонента - PullRequest
Новая
       6

Угловые и радиокнопки - Скрыть div на основе выбора и выходного значения для другого компонента

0 голосов
/ 21 мая 2018

Я постараюсь перейти прямо к делу.У меня есть компонент, HTML-код которого содержит две переключатели, например: 

<div class="row" id="existingFlows">
  <div class="col">
    <p>I dati personali sono trasferiti all'estero?</p>
  </div>
  <div class="col col-lg-3">
    <div ngbRadioGroup name="existingFlowsRadio">
      <label ngbButtonLabel class="btn-success">
        <input ngbButton type="radio" (click)="setExistingFlows(true)" [value]="true"> Si
      </label>
      <label ngbButtonLabel class="btn-danger">
        <input ngbButton type="radio" (click)="setExistingFlows(false)" [value]="false"> No
      </label>
    </div>
  </div>
</div>

Выбранное значение должно быть доступно в другом компоненте, поэтому мне пришлось использовать выходной декоратор, например: 

@Output() existingFlows = new EventEmitter <boolean>();

Теперь я бы хотел, чтобы другой div был скрыт или отображен в зависимости от выбранного значения переключателей выше.Проблема заключается в том, что я больше не могу использовать «существующий поток» с чем-то вроде 

<div [hidden]="!existingFlows">

, так как переменная больше не является чисто логической.

Я бы легко создал другую логическую переменную и установил еена true / false на основе выбранной радиокнопки, но подход не выглядит для меня хорошо, и у меня есть ощущение, что я делаю что-то не так ...

У вас, ребята, есть какие-либо предложения о том, как лучшевыполнить это?

Спасибо

Майк

1 Ответ

0 голосов
/ 22 мая 2018

Поскольку вы использовали @Output, похоже, что вы используете родительско-дочерние отношения.Поэтому вы должны генерировать событие из дочернего компонента и перехватывать его в родительском компоненте.Вы можете генерировать событие при изменении значения переключателя.

Приходя к вашему коду: 

<div [hidden]="!existingFlows">

Так как существующий поток является EventEmitter, он не может использоваться как обычная переменная, и вы будетедолжны использовать другую логическую переменную для отображения / скрытия Div.Вы можете использовать директиву * ngIf для отображения / скрытия Div.

Вот рабочий код: Родительский компонент 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
      <child-comp (eventFromChild)="someFunction($event)"></child-comp>
      <div *ngIf="showOrHideDiv">
        This Div is in Parent Component
      </div>
      `
})

export class AppComponent  {
  showOrHideDiv: boolean = false;
  someFunction(event){
    this.showOrHideDiv = event;
  }
}

Дочерний компонент 

import { Component, Output, EventEmitter  } from '@angular/core';

@Component({
  selector: 'child-comp',
  template: `
      <div name="existingFlowsRadio">
      <label>
        <input type="radio" name="radio" (change)="setExistingFlows(true)" [value]="true"> Si
      </label>
      <label>
        <input type="radio" name="radio" (change)="setExistingFlows(false)" [value]="false"> No
      </label>
    </div>
  `
})

export class ChildComponent  {
  @Output() eventFromChild: EventEmitter<boolean>= new EventEmitter<boolean>();
  setExistingFlows(v){
    this.eventFromChild.emit(v);
  }
}

app.module.ts 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ChildComponent } from './child.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, ChildComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Вот ссылка для получения дополнительной справки: EventEmitter in Angular

Надеюсь, эта помощь:)

...