在Angular 5中触发从组件到不可见组件的事件答案

【问题标题】：Trigger an event from a component to an invisible component in Angular 5在Angular 5中触发从组件到不可见组件的事件
【发布时间】：2018-12-14 19:08:13
【问题描述】：

我在一个组件 (child.html) 中有一个 div，我会触发另一个 (parent.html) 的单击事件，以将布尔值从 false 变为 true。我知道可以将 html 用作<child-component [Event]></child-component>，但孩子必须对用户不可见。

是否可以从 app.css 添加 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>

父.css：

 app-child: { display: none }

父.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();
  }

【问题讨论】：

组件通信是 Angular 中非常基本的东西，可以很容易地用谷歌搜索。尽管如此：stackblitz.com/edit/…
@Carsten 我知道这是一个非常基本的，但通常你必须在 html 文件中纠正一些语法来检索绑定属性，但对我来说，我正在尝试不使用 html，例如 () 或 @987654329 @
这不是一种角度的方法，因此它是不好的做法。你的理由是什么？

标签： angular typescript events ionic3 dom-events

【解决方案1】：

首先阅读Angular Component Interaction。

那么你就会知道组件之间的通信主要有4种方式。

在您的场景中，您可以使用任何您想要的方法。

看看这个例子

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。

【讨论】：

非常感谢您的帮助，所以我将尝试从另一个角度解决问题：我需要使对用户不可见（我也更新我的帖子）
是否可以将的 css 添加到 app.css 中？？
你想什么时候隐藏app-child
始终作为 css display: none
我会更新堆栈闪电战。几分钟后看看

【解决方案2】：

Working Example

HTML：

你好.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;
  }
}

【讨论】：