[英]Trigger an event from a component to an invisible component in Angular 5
我在組件(child.html)中有一個div,我將向另一個事件(parent.html)觸發一個click事件,以將布爾值從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>
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();
}
首先了解角組件交互 。
然后,您將知道有四種在組件之間進行通信的主要方法。
在您的方案中,您可以使用任何所需的方法。
看這個例子
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
}
在這里,我使用了“ 父偵聽子事件”方法。 而且我為此創建了一個堆疊閃電戰 。
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;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.