javascript - MaterializeCSS 图标不适用于 Angular 7 中的导航栏

标签 javascript html css materialize angular7

我正在尝试使用 MaterializeCSS Icon 来处理导航栏。在发布的代码中,arrow-drop_down 似乎不起作用。相反,它只显示一个文本。图标呈现在除 app.component.html 文件之外的其他页面上。

我尝试直接在 index.html 文件中导入以下代码。结果还是一样。我在这里错过了什么吗?此外,我无法弄清楚图标显示在 app.component.html 之外的任何其他组件中的原因

任何帮助将不胜感激。谢谢。让我知道是否需要更多详细信息。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

索引.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>UiCommunity</title>
  <base href="/">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<header>
  <nav class="white">
    <div class="container nav-wrapper">
      <a href="/" class="brand-logo">Community</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li>
          <a routerLink="/" routerLinkActive="active">HOME</a>
        </li>
        <li>
          <a routerLink="/event" routerLinkActive="active">EVENTS</a>
        </li>
        <li *ngIf="!authenticated()">
          <a routerLink="/login" routerLinkActive="active">LOGIN</a>
        </li>
        <li *ngIf=!authenticated()>
          <a routerLink="/register" routerLinkActive="active">SIGNUP</a>
        </li>
        <li *ngIf=authenticated()>
          <a routerLink="/logout" class="black-text">LOGOUT</a>
        </li>
        <li *ngIf=authenticated()>
          <a routerLink="/profile" class="dropdown-trigger black-text" data-target="dropdown1">PROFILE<i class="material-icons right">arrow_drop_down</i></a>
        </li>
        <li>
          <a class="btn waves-effect waves-lime lime darken-4 white-text">Donate</a>
        </li>
      </ul>
    </div>
  </nav>
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider" tabindex="-1"></li>
    <li><a href="#!">three</a></li>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
  </ul>
</header>
<main>
  <router-outlet></router-outlet>
</main>
<footer></footer>

这是我的 style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/materialize-css/dist/css/materialize.css";
@import url('https://fonts.googleapis.com/css?family=Philosopher');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

最佳答案

你能尝试直接在你的应用组件 ts/js 文件上导入你的样式文件吗?如果您安装了所有依赖项并且它在其他页面上工作,则可能是导入或错误路径问题。

关于javascript - MaterializeCSS 图标不适用于 Angular 7 中的导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54610943/

相关文章:

javascript - 在用户注册时以 React-native 方式重新启动应用程序

javascript - 使用 Javascript/PHP 的“另存为”框

javascript 在鼠标单击时获取 x 和 y 坐标

javascript - 过渡组件 Vuejs - 不工作 - 内部和外部之间的差异

css - 如何设置小部件位置的CSS

javascript - 如何默认打开第一个选项卡 Thymeleaf Css Bootstrap

javascript - _POST_ORDER_FULFILLMENT_DATA_ MD5 值不匹配出现错误

javascript - Fabric.js 在 Canvas 上的图像上分层文本

javascript - 通过 JavaScript 创建对话框

html - 在导航中突出显示事件选项卡