英文:
Disable MatRipple in Child Components
问题
我有一个名为"text-message"的子组件，它与多个父组件共享。它使用了一个"matRipple"效果。我需要在除了一个名为"group-message"的父组件之外的每个父组件上都使用这个效果。在"text-message.component.ts"文件中存在以下代码：
@ViewChild(MatRipple, { static: true }) ripple: MatRipple;launchRipple() {this.ripple.launch({persistent: false,centered: true,animation: { enterDuration: 1000, exitDuration: 1200 },color: 'rgba(33, 150, 243, 0.15)'});}
在"text-message.component.html"中是这样的：
<div matRipple class="text-message" [ngClass]="{'unread': !message?.tmsRead}" appDblClick(dblclick)="onClick($event)">
在父组件中，子组件的使用方式如下：
<text-message [message]="message" [timeOffset]="currentSiteTimeOffset$ | async" [showStatus]="false"></text-message>
我需要在"group-message.component.html"中关闭这个效果。这可能吗？我尝试了这样的方式：
<text-message [message]="message" [timeOffset]="currentSiteTimeOffset$ | async" [showStatus]="false" [disableRipple]="true"></text-message>
但是我收到了一个错误信息："can't bind to 'disableRipple' since it isn't a known property of 'text-message'"。
我还尝试了在"group-message.component.ts"中这样做：
@ViewChildren(MatRipple) ripple: MatRipple;this.ripple.disabled;
我对Angular非常陌生，仍在学习如何处理父组件、子组件和兄弟组件。非常感谢您的帮助。
英文:
I have a child component called "text-message" that is shared with several parent components. It uses a "matRipple" effect. I need this effect on every parent except for one named "group-message". In the text-message.component.ts file the following code exists:
@ViewChild(MatRipple, { static: true }) ripple: MatRipple;launchRipple() {this.ripple.launch({persistent: false,centered: true,animation: { enterDuration: 1000, exitDuration: 1200 },color: 'rgba(33, 150, 243, 0.15)'});}
On the text-message.component.html is:
<div matRipple class="text-message" [ngClass]="{'unread': !message?.tmsRead}" appDblClick(dblclick)="onClick($event)">
The child component looks like this in the parent:
<text-message [message]="message" [timeOffset]="currentSiteTimeOffset$ | async" [showStatus]="false"></text-message>
I need to turn this off if it is in the "group-message.component.html". Is this possible? I tried this:
<text-message [message]="message" [timeOffset]="currentSiteTimeOffset$ | async" [showStatus]="false" [disableRipple]="true" ></text-message>
But I receive an error "can't bind to 'disableRipple"' since it isn't a known property of 'text-message'".
I also tried this in the group-message.component.ts:
@ViewChildren(MatRipple) ripple : MatRipple;this.ripple.disabled;
I am very new to Angular and am still learning how to work with parents, children, and siblings. Any assistance is greatly appreciated.
答案1
得分: 0
MatRipple指令的一个属性是
@Input('matRippleDisabled')disabled: boolean
我们可以通过在text-message.component.html中添加一个输入来使用它
<div matRipple class="text-message" [ngClass]="{'unread': !message?.tmsRead}" appDblClick(dblclick)="onClick($event)" [matRippleDisabled]="disableRipple">
当然，在text-message.component.ts中需要声明disableRipple变量。我们将其声明为@Input，因为我们希望在新值到达时替换默认值
@Input() disableRipple = false;
下一步是通过从父组件传递true来设置disableRipple变量的值。
group-message.component.html保持不变
<text-message [message]="message" [timeOffset]="currentSiteTimeOffset$ | async" [showStatus]="false" [disableRipple]="true" ></text-message>
英文:
One of properties of MatRipple directive is
@Input('matRippleDisabled')disabled: boolean
We can make a use of it by adding an input to the text-message.component.html
<div matRipple class="text-message" [ngClass]="{'unread': !message?.tmsRead}" appDblClick(dblclick)="onClick($event)" [matRippleDisabled]="disableRipple">
Of course the declaration of disableRipple variable is needed in text-message.component.ts. We declare it as @Input, since we want to replace the default value as soon as the new one arrives
@Input() disableRipple = false;
The next step would be setting a value of disableRipple variable by passing true from parent component.
The group-message.component.html would remain like this
<text-message [message]="message" [timeOffset]="currentSiteTimeOffset$ | async" [showStatus]="false" [disableRipple]="true" ></text-message>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论