MaterializeCSS Navbar和Sidenav + Angular 9

Question

因此，我正在尝试为学校项目制作类似于仪表板的Angular应用。我一直在制作Angular组件以使站点模块化。到目前为止，我已经完成了导航栏和sidenav，但是侧面导航有点问题。我希望侧面导航在全尺寸时显示在屏幕上，而在较小的屏幕上折叠。当我折叠屏幕时，汉堡菜单栏不会打开侧面导航。我真的不明白为什么会这样。从我收集的文档中，我必须初始化插件。

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
});

我在页面底部的脚本标签中。我在Codepen here中模拟了我的代码。它没有像在Angular中那样被“组件化”，但是它可以理解这一点。如果有人可以提供帮助，我将不胜感激。谢谢

Answer 1

删除未声明的选项变量。

实体化文档有些混乱-列出的javascript初始化实际上会破坏您的代码，并且会吸引很多人。因此，如果只需要默认的sidenav功能，请将其删除。

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
});

如果确实需要传递任何选项，请像这样声明它：

document.addEventListener('DOMContentLoaded', function() {
    var options = {
       edge: 'right'
    }
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
});

options是一个对象-用于自定义组件的键值对，这种模式将通过实例化组件来实现。这是可以在初始化时配置的选项列表。您可以将sidenav放置在屏幕的另一侧，在打开，关闭时运行功能。

https://materializecss.com/sidenav.html#options

作为旁注-调试时总是检查控制台的线索。这是从您的Codepen：

Uncaught ReferenceError：未定义选项在HTMLDocument。 （vYOeqEZ：61）

此外，最后的注释-您提到组件化。阅读有关将Materialize与React结合使用的文章。它将阐明主题。

https://medium.com/@mattdlockyer/youre-using-materialize-css-wrong-470b593e78e9

您还错过了materialicons CDN，所以您的图标没有显示：

https://materializecss.com/icons.html

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