Запустить событие из компонента в невидимый компонент в Angular 5 - PullRequest
Новая
       7

Запустить событие из компонента в невидимый компонент в Angular 5

0 голосов
/ 06 июля 2018

У меня есть div внутри компонента (child.html), и я бы инициировал событие click для другого (parent.html), чтобы превратить логическое значение из false в true. Я знаю, что возможно использовать html как <child-component [Event]></child-component>, но ребенок должен быть невидимым для пользователя.

Можно ли добавить css из app.css, чтобы сделать его невидимым ?? Я не уверен, что это возможно сделать в Angular, вот что я попробовал:

child.html: 

   <div class="notif-filter" (click)="hideNotif(event)"> </div>

child.ts: 

 public hideNotif(event) {
    console.log(event, 'hideNotif is fired !!');
     this.hideMe = true;
    // this.feedIsVisible = false;
   }

parent.html: (этот должен быть невидимым) 

  <child-component></child-component>

parent.css: 

 app-child: { display: none }

parent.ts: 

     @input event: Event (comming from the child)

    lockScreen(): void {
    this.screenLocked = true;
    this.feedIsVisible = false;    ==> *This should turn to true depending on 
    the click event in the child.html*
    this.nav.setRoot('ConnexionPage').then();
  }

Ответы [ 2 ]

0 голосов
/ 06 июля 2018

Рабочий пример

HTML:

hello.componemt.html 

<button (click)="onClick()">hello button</button>

app.component.html 

<hello (childClick)="onChildButtonClick($event)"></hello>

{{show}}

TS:

hello.component.ts: 

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

@Component({
 selector: 'hello',
  templateUrl: './hello.component.html',
  styleUrls: [ './app.component.css' ]
})
export class HelloComponent  {

  public show: boolean;

  @Output()
  public childClick = new EventEmitter<boolean>();

  constructor() {
    this.show = true;
  }

  public onClick(): void {
    this.show = !this.show;
    this.childClick.emit(this.show);
  }
}

app.component.ts: 

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
   public show: boolean;


  constructor() {
    this.show = true;
  }
  public onChildButtonClick(value): void {
    this.show = value;
  }
}
0 голосов
/ 06 июля 2018

Сначала прочитайте о Взаимодействие угловых компонентов .

Тогда вы узнаете, что существует четыре основных способа взаимодействия между компонентами.

В вашем сценарии вы можете использовать любой метод, который захотите.

посмотрите на этот пример

child.component.ts 

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  public show: boolean;

  @Output()
  public childButtonClick = new EventEmitter<boolean>();

  constructor() {
    this.show = true;
  }

  public onClick(): void {
    this.show = !this.show;
    this.childButtonClick.emit(this.show);
  }

}

child.component.html 

<button (click)="onClick()">Child button</button>

app.component.ts 

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public show: boolean;


  constructor() {
    this.show = true;
  }
  public onChildButtonClick(value): void {
    this.show = value;
  }
}

app.component.html 

<app-child (childButtonClick)="onChildButtonClick($event)"></app-child>


<div *ngIf="show">
  This will be hidden when you click the button
  And I'm using ngIf directive
</div>

<br>
<br>

<div [ngClass]="{'hide-me': !show}">
  This will be hidden when you click the button
  And I'm using ngClass directive
</div>

<br>
<div>
  show value: {{show}}
</div>

app.component.css 

.hide-me {
  display: none
}

Здесь я использовал Parent прослушивает дочернее событие .И для этого я создал stackblitz .

...