我在组件(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();
}
2 回答
首先阅读Angular Component Interaction .
然后你就会知道组件之间有4种主要的通信方式 .
Pass data from parent to child with input binding
Parent listens for child event
Parent interacts with child via local variable
https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service .
在您的方案中,您可以使用任何所需的方法 .
看看这个例子
child.component.ts
child.component.html
app.component.ts
app.component.html
app.component.css
在这里,我使用了 Parent listens for child event 方法 . 我为此创建了一个stackblitz .
Working Example
HTML:
hello.componemt.html
app.component.html
TS:
hello.component.ts:
app.component.ts: