角度不服从css答案

【问题标题】：Angular not obeying css角度不服从css
【发布时间】：2021-09-14 19:17:42
【问题描述】：

我是 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 会导致我所描述的问题。

有什么建议吗？

【问题讨论】：

标签： javascript html jquery css angular

【解决方案1】：

这不是有效的 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>

【讨论】：

【解决方案2】：

我想通了。由于某些未知原因，我不得不添加 routerLink="."

    <a mat-list-item routerLink="." (click)= "customerRoute()" >
        Customers
    </a>

【讨论】：