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

Question

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

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

这里是示例，首先当页面加载一次时：

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

注意每张图片上的两个按钮是如何变化的。这是我用来生成 header 部分的代码：

<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>

欢迎任何帮助。

Answer 1

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

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

MDB 覆盖默认 Bootstrap 样式，因此无法在一个组件上使用基本样式而在另一个组件上使用 material 样式。

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

Angular MDBootstrap styles stop applying when page is reloaded

angular

twitter-bootstrap

mdbootstrap