我在组件(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();
}
答案 0 :(得分:2)
首先阅读有关Angular Component Interaction的信息。
那么您将知道组件之间进行通信的主要方法有四种。
在您的方案中,您可以使用任何所需的方法。
看这个例子
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
}
在这里,我使用了父项监听子事件方法。 我为此创建了一个stackblitz。
答案 1 :(得分:0)
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;
}
}