angular - 类型错误 : this. root_ 为空

Question

使用 Material https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer试图让它工作 Iget

我使用:

  <aside class="mdc-drawer mdc-drawer--dismissible">
  <div class="mdc-drawer__content">
    <nav class="mdc-list">
      <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
        <span class="mdc-list-item__text">Inbox</span>
      </a>
      <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
        <span class="mdc-list-item__text">Outgoing</span>
      </a>
      <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
        <span class="mdc-list-item__text">Drafts</span>
      </a>
    </nav>
  </div>
</aside>

<div class="mdc-drawer-app-content">
  App Content
</div>

一旦我导入这个:

import {MDCList} from "@material/list";
const list = MDCList.attachTo(document.querySelector('.mdc-list'));
list.wrapFocus = true;

或者这个

import {MDCDrawer} from "@material/drawer";
const drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));

就像教程中写的那样，我明白了:

https://imgur.com/a/K8f0juo

Answer 1

Material 组件 Javascript 代码使用 import声明。这是一个较新的 Javascript 功能，虽然现在大多数网络浏览器都支持它，但您需要添加 type="module"到 <script> HTML 中的元素。

您没有在问题中包含您的 HTML，但它应该类似于:

<script type="module" src="./main.js">

或者，您可以告诉 webpack使用babel带有 preset-env 的插件将 ES6 代码转换为 ES5 代码的选项，可以解决 import 问题声明。

更多详情:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules