将背景类应用于angular 6中的父div
我正在制作一个手风琴与引导4使用卡。在每张卡片的侧面,我都有一些图标,如编辑、查看、详细信息等。单击这些图标时,会调用组件中的一个函数,然后将用户导航到子路径 子路由器出口显示在此手风琴的右侧 我想在单击该卡下的任何图标时更改卡头背景。我该怎么做 这是html将背景类应用于angular 6中的父div,angular,bootstrap-4,angular6,bootstrap-accordion,Angular,Bootstrap 4,Angular6,Bootstrap Accordion,我正在制作一个手风琴与引导4使用卡。在每张卡片的侧面,我都有一些图标,如编辑、查看、详细信息等。单击这些图标时,会调用组件中的一个函数,然后将用户导航到子路径 子路由器出口显示在此手风琴的右侧 我想在单击该卡下的任何图标时更改卡头背景。我该怎么做 这是html <div id="accordion" role="tablist" aria-multiselectable="true"> <!--Kitchen--> <div class="ca
<div id="accordion" role="tablist" aria-multiselectable="true">
<!--Kitchen-->
<div class="card mwk-project-left" *ngFor="let psl of projectSubList; let i = index">
<div class="card-header mwk-project-details-hdr" role="tab" id="heading{{psl.Id}}">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse{{psl.Id}}" aria-expanded="true" [attr.aria-controls]="'collapse'+psl.Id">
{{psl.Description}}
</a>
</h5>
</div>
<div id="collapse{{psl.Id}}" class="collapse show" role="tabpanel" [attr.aria-labelledby]="'heading'+psl.Id">
<div class="card-body">
<ul *ngIf="psl.Features">
<li *ngFor="let ftr of psl.Features; let fi = index">
{{ftr.FeatureGroup}}: {{ftr.Description}}
</li>
</ul>
<h4 class="text-danger" *ngIf="!psl.Features">No features found!</h4>
<div class="mwk-actions-sub">
<button mat-icon-button color="accent" type="button" (click)="onView(psl.Id)" title="View {{psl.Description}}" class="matIconButton"><mat-icon>ballot</mat-icon></button>
<button mat-icon-button color="primary" type="button" (click)="onDetail(psl.Id)" title="Detail {{psl.Description}}" class="matIconButton"><mat-icon>view_list</mat-icon></button>
<button mat-icon-button color="primary" type="button" (click)="onEdit(psl.Id)" title="Edit {{psl.Description}}" class="matIconButton"><mat-icon>edit</mat-icon></button>
<button mat-icon-button color="primary" type="button" (click)="onConfig(psl.Id)" title="Config {{psl.Description}}" class="matIconButton"><mat-icon>settings_applications</mat-icon></button>
<button mat-icon-button color="warn" type="button" (click)="onDelete(psl.Id, psl.Description)" title="Delete {{psl.Description}}" class="matIconButton"><mat-icon>clear</mat-icon></button>
</div>
</div>
</div>
</div>
</div>
-
{{ftr.FeatureGroup}:{{ftr.Description}
找不到任何功能!
投票
查看列表
编辑
设置和应用程序
清楚的
我该怎么做
查看了本页中的div示例,但我没有a标记
吉姆
上下快速移动
更新1
我做了以下两个更改,现在我的背景应用于卡片标题部分
<div class="card mwk-project-left" *ngFor="let psl of projectSubList; let i = index" routerLinkActive="mwk-project-left-active" [routerLinkActiveOptions]="{exact: true}">
然后
<a mat-icon-button color="accent" [routerLink]="[psl.Id]" title="View {{psl.Description}}" class="matIconButton"><mat-icon>ballot</mat-icon></a>
<a mat-icon-button color="primary" [routerLink]="[psl.Id, 'detail-list']" title="Detail {{psl.Description}}" class="matIconButton"><mat-icon>view_list</mat-icon></a>
<a mat-icon-button color="primary" [routerLink]="[psl.Id, 'edit']" title="Edit {{psl.Description}}" class="matIconButton"><mat-icon>edit</mat-icon></a>
<a mat-icon-button color="primary" [routerLink]="[psl.Id, 'config-edit']" title="Config {{psl.Description}}" class="matIconButton"><mat-icon>settings_applications</mat-icon></a>
<a mat-icon-button color="warn" [routerLink]="[psl.Id, 'edit']" [queryParams]="{delete: 'yes'}" title="Delete {{psl.Description}}" class="matIconButton"><mat-icon>clear</mat-icon></a>
投票
查看列表
编辑
设置和应用程序
清楚的
以上更新1在单击路由器出口部分外部时提供了帮助
<div class="card mwk-project-left" *ngFor="let psl of projectSubList; let i = index" routerLinkActive="mwk-project-left-active" [routerLinkActiveOptions]="{exact: true}">
当我单击一个链接从路由器出口内部转到另一个子页面时,我的update 1类此时被删除。所以我失去了mt背景。现在如何解决这个问题
更新2
精确:false修复了从路由器出口进入不同子页面时的错误
<div class="card mwk-project-left" *ngFor="let psl of projectSubList; let i = index" routerLinkActive="mwk-project-left-active" [routerLinkActiveOptions]="{exact: false}">
我很好,谢谢你的关注 这篇文章有帮助
然后使用exact false
将routerLinkActive
应用于卡片div,因为其中一个子页面具有将用户带到其他页面的链接
<div class="card mwk-project-left" *ngFor="let psl of projectSubList;
let i = index" routerLinkActive="mwk-project-left-active"
[routerLinkActiveOptions]="{exact: false}">
最后,我不得不将按钮更改为锚定标签
从
投票
到
投票
您已经在这里呆了足够长的时间(希望)知道您应该使用“回答”机制来回答自己的问题,而不是对您的问题进行编辑……)谁曾否决过投票,想留下评论吗?@RoddyofFrozenpeas我本来可以,但我和angular的经历只有一个月。我希望有人能给我指出一个更好的解决办法。
<button mat-icon-button color="accent" type="button" (click)="onView(psl.Id)"
title="View {{psl.Description}}" class="matIconButton"><mat-icon>ballot</mat-icon></button>
<a mat-icon-button color="accent" [routerLink]="[psl.Id]" title="View {{psl.Description}}"
class="matIconButton"><mat-icon>ballot</mat-icon></a>