重新加载页面时，Angular MDBootstrap 样式停止应用答案

【问题标题】：Angular MDBootstrap styles stop applying when page is reloaded重新加载页面时，Angular MDBootstrap 样式停止应用
【发布时间】：2020-03-19 16:22:21
【问题描述】：

我正在使用 MDBootstrap 包（Angular 版本），我正在尝试将它应用到我正在构建的页面的按钮上。

首先，页面已加载并应用了按钮的样式，但如果我重新加载页面，则不再应用样式。我想知道为什么会发生这种情况，以及是否有办法省略特定组件的 MDBootstrap 样式并应用基本的 Bootstrap 样式。

这里是一个例子，当页面加载一次时：

然后这是重新加载时的同一页面：

请注意每个图像上的两个按钮如何变化。这是我用来生成标题部分的代码：

<div class="row align-content-between m-3 mt-4">
    <div class="col-2 col-md-1">
        <button class="btn btn-primary" size="sm"
            [routerLink]="['/admin/project-management']" routerLinkActive="router-link-active" mdbWavesEffect>
            <mdb-icon fas icon="arrow-left"></mdb-icon>
            <div class="d-none d-md-inline ml-2">Atrás</div>
        </button>
    </div>
    <div class="col my-auto">
        <h3><strong>{{project_id != 0 ? "Modificar proyecto" : "Crear proyecto"}}</strong></h3>
    </div>

</div>

欢迎任何帮助。

【问题讨论】：

标签： angular twitter-bootstrap mdbootstrap

【解决方案1】：

我假设您使用 MDB Angular v8 或更高版本。在这种情况下，您应该使用 MDB 组件/指令语法，而不是向按钮元素添加类。按钮的正确语法：

<button mdbBtn color="primary" size="sm">MDB Button</button>

MDB 会覆盖默认的 Bootstrap 样式，因此无法在一个组件上拥有基础样式，而在另一个组件上拥有材质样式。

【讨论】：