时间戳

首页 > 解决方案 > 角度不服从css

javascript - 角度不服从css

问题描述

我是 Angular 的新手，有一个关于它使用 css 的问题。我的理解是，组件只服从其中的 css，不受程序任何其他部分的 css 干扰。

我有一个名为MainNavComponent的组件。

Component({
  selector: 'main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.css']
})
export class MainNavComponent implements OnInit, OnDestroy {...

应用程序中有一个滑出菜单，其中包含导航链接按钮。单击按钮时，其背景会变为不同的颜色。然后，当您将鼠标悬停在其他按钮上时，所选按钮的背景颜色不会改变。这适用于除一个以外的所有按钮。

这是坏按钮的html：

    <a mat-list-item (click)= "customerRoute()" >
        Customer
    </a>

在 ./main-nav.component.css 文件中，应用于 mat-list-item 类的唯一 css 是这样的：

.mat-nav-list,
.mat-list-item {
    padding-top: 0 !important;
    font-size: 15px !important;
    color: #444444 !important;
    font-family: "HelveticaNeueW01-55Roma" !important;
}

.mat-list-item h2.mat-line {
    font-size: 18px !important;
    font-weight: 200;
    line-height: 1.35em;
    color: #263746 !important;
    font-family: "HelveticaNeueW01-45Ligh" !important;
  }
  
  .mat-list-item p.mat-line {
    font-size: 14px !important;
    font-family: "HelveticaNeueW01-45Ligh" !important;
  }

每个按钮都按预期工作，除了一个。我在那里看不到任何控制悬停、活动、焦点或访问事件的东西，所以我不知道为什么它完全可以在任何链接按钮上工作。我唯一的理论是我看到一个 bootstrap.js 文件被导入到某个地方。它可以控制导航链接按钮的背景颜色吗？

无论如何，我试图通过将以下 css 添加到 ./main-nav.component.css 文件来强制坏按钮执行好按钮正在执行的操作：

.mat-list-item:active {
    background-color: #f1f1f1 !important;
}

但这没有任何影响。我也尝试过专注并参观了。他们也没有任何影响。

编辑

我了解到它与routerLink 有关。如果我将 html 更改为：

    <a mat-list-item routerLink="/Customers" >
        Customers
    </a>

然后它可以正常工作。但后来我被困在只有一条路线。(click) 调用的 javascript 会根据特定条件导致路由发生变化。一旦确定了正确的路线，它就会使用以下打字稿导航到它：

  customerRoute() {
    this.router.navigateByUrl(this.routeLink);
  }

因此，以这种方式导航而不是使用 routerLink 会导致我所描述的问题。

有什么建议么？

标签： javascripthtmljquerycssangular

解决方案

这不是有效的 mat-list-item：

<a mat-list-item (click)= "customerRoute()" >
        Customer
    </a>

尝试这样的事情：

<mat-list-item><a (click)= "customerRoute()" >
        Customer
    </a></mat-list-item>

还可以考虑将路由器功能用于链接。喜欢...

<a [routerLink]="['/customer']">Customer</a>

推荐阅读