Angular 触发从组件到角度5中不可见组件的事件

我在组件child.html中有一个div，我会触发另一个parent.html的click事件，将布尔值从false变为true。我知道可以使用html作为模板，但孩子必须对用户不可见

是否可以从app.CSS向添加CSS以使其不可见？ 我不确定是否有可能在Angular中实现，以下是我尝试的：

child.html：

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

parent.html：这个应该是不可见的

  <child-component></child-component> 

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

首先读一下

然后您将知道组件之间有4种主要的通信方式

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

看看这个例子

child.component.ts

app.component.html

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

{{show}}

在这里，我使用了parentlistensforchild事件方法。 我已经为此创建了一个应用程序。

首先阅读

然后您将知道组件之间有4种主要的通信方式

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

看看这个例子

child.component.ts

app.component.html

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

{{show}}

在这里，我使用了parentlistensforchild事件方法。 我已经为此创建了一个

HTML:

hello.componemt.html

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

HTML:

hello.componemt.html

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

---

组件通信在angular中是一个非常基本的东西，可以很容易地在google上实现。尽管如此：@Carsten我知道这是一个非常基本的方法，但通常您必须在html文件中更正一些syntac以检索绑定属性，但对我来说，我尝试不使用html，例如或[]，这不是一个角度的方法，这是一个不好的做法。你的理由是什么？组件通信在angular中是一个非常基本的东西，可以很容易地在google上实现。尽管如此：@Carsten我知道这是一个非常基本的方法，但通常您必须在html文件中更正一些syntac以检索绑定属性，但对我来说，我尝试不使用html，例如或[]，这不是一个角度的方法，这是一个不好的做法。你的理由是什么？非常感谢你的帮助，所以我将尝试从另一个角度来解决这个问题：我需要让用户看不见我也更新我的帖子有可能将css添加到app.css中吗？你想什么时候隐藏app childalways作为css显示：无我将更新stackblitz。几分钟后看一看非常感谢你的帮助，所以我将尝试从另一个角度来解决这个问题：我需要让用户看不见我也更新我的帖子有可能将css添加到app.css中吗？你想什么时候隐藏应用程序子项始终作为css显示：无我将更新stackblitz。几分钟后看一看

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-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>

.hide-me {
  display: none
}

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

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

{{show}}

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);
  }
}

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;
  }
}