【问题标题】：Understanding the Angular 4 Framework and MDC Webcomponent: Drawer了解 Angular 4 框架和 MDC Web 组件：抽屉
【发布时间】：2017-07-12 22:57:18
【问题描述】：

主要问题

我遇到的主要问题是了解如何使用 MDC Webcomponent Drawer 文档中的特定代码行，更具体地说是 mdc 对象（在提供的示例代码下方）。显然我不能发布超过 2 个链接，因为我没有足够的 bs“声誉”点。因此，我无法链接我实际所做的所有研究来为自己找到答案……所以抽屉示例是工作示例和它的源代码。我已经阅读了这些特定的资源：

Web 组件Drawer
抽屉示例
抽屉示例源代码
材料组件 Web 组件 mdc-drawer Github Project
还有一些其他各种堆栈溢出、github 示例和项目

示例代码

以下是完整的代码。如果我要将它直接粘贴到 angular4 项目的 src/ 目录中的“index.html”文件中，它可以正常工作，所以很明显我不明白如何访问 mdc 看似来自 material-web-components.js 文件的对象。我认为我需要以某种方式使该 .js 文件中的 mdc 对象可用于我的 angular4 项目，并且我对此进行了很多研究，但我可能没有问正确的问题。在所有示例中，它只是说使用内容交付网络 (CDN) 或通过 ./assets/ 目录或 node_modules/ 文件夹在您的项目中本地引用它。我可以通过 CDN 或本地资产/参考访问 .js 文件，但它仅在顶级 index.html 文件中可用。如果我尝试在 angular4 项目的任何其他部分中使用它，例如在 app-root 组件中，它不会连接或工作。我是否需要在配置文件、app.module.ts、导入等中提供它？

<!DOCTYPE html>
<!--
  Copyright 2016 Google Inc. All rights reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>Drawer (Persistent) - Material Components Catalog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png" />
    <script src="../assets/material-components-web.css.js" charset="utf-8"></script>
    <script src="../assets/demo-styles.css.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
    /* Ensure layout covers the entire screen. */
    html {
      height: 100%;
    }

    /* Place drawer and content side by side. */
    .demo-body {
      display: flex;
      flex-direction: row;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      height: 100%;
      width: 100%;
    }

    /* Stack toolbar and main on top of each other. */
    .demo-content {
      display: inline-flex;
      flex-direction: column;
      flex-grow: 1;
      height: 100%;
      box-sizing: border-box;
    }

    .demo-main {
      padding-left: 16px;
    }
    </style>
  </head>
  <body class="demo-body mdc-typography">
    <aside class="mdc-persistent-drawer">
      <nav class="mdc-persistent-drawer__drawer">
        <div class="mdc-persistent-drawer__toolbar-spacer"></div>
        <div class="mdc-list-group">
          <nav class="mdc-list">
            <a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
              <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
            </a>
            <a class="mdc-list-item" href="#">
              <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
            </a>
            <a class="mdc-list-item" href="#">
              <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">send</i>Sent Mail
            </a>
            <a class="mdc-list-item" href="#">
              <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">drafts</i>Drafts
            </a>
          </nav>

          <hr class="mdc-list-divider">

          <nav class="mdc-list">
              <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">email</i>All Mail
              </a>
              <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">delete</i>Trash
              </a>
              <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">report</i>Spam
              </a>
            </nav>
          </div>
      </nav>
    </aside>
    <div class="demo-content">
      <header class="mdc-toolbar mdc-elevation--z4">
        <div class="mdc-toolbar__row">
          <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
            <button class="demo-menu material-icons mdc-toolbar__icon--menu">menu</button>
            <span class="mdc-toolbar__title catalog-title">Persistent Drawer</span>
          </section>
        </div>
      </header>

      <main class="demo-main">
        <h1 class="mdc-typography--display1">Persistent Drawer</h1>
        <p class="mdc-typography--body1">Click the menu icon above to open and close the drawer.</p>
      </main>

      <script src="../assets/material-components-web.js" charset="utf-8"></script>
      <script>
        var drawerEl = document.querySelector('.mdc-persistent-drawer');
        var MDCPersistentDrawer = mdc.drawer.MDCPersistentDrawer;
        var drawer = new MDCPersistentDrawer(drawerEl);
        document.querySelector('.demo-menu').addEventListener('click', function() {
          drawer.open = !drawer.open;
        });
        drawerEl.addEventListener('MDCPersistentDrawer:open', function() {
          console.log('Received MDCPersistentDrawer:open');
        });
        drawerEl.addEventListener('MDCPersistentDrawer:close', function() {
          console.log('Received MDCPersistentDrawer:close');
        });
      </script>
    </div>
  </body>
</html>

缺乏理解

我是 JavaScript、MVC 框架、Angular2/4/Angular-cli 和集成材料设计工具集的新手。几个月以来，我一直在自学这一点，并试图一起形成对所有这些的基本理解。我已经完成并构建了整个 Angular “Heroes” 示例项目，并使用它通读了表层文档，因此我尝试为这些概念以及如何使用这个特定框架做好准备。我觉得我在这个 mdc 对象中遗漏了一些简单（可能很复杂）的东西。在 Github 项目文档中，它们实现的 JavaScript 与 Drawer 示例中的略有不同，如您所见：

HTML

<aside class="mdc-persistent-drawer mdc-typography">
  <nav class="mdc-persistent-drawer__drawer">
    <header class="mdc-persistent-drawer__header">
      <div class="mdc-persistent-drawer__header-content">
        Header here
      </div>
    </header>
    <nav id="icon-with-text-demo" class="mdc-persistent-drawer__content mdc-list">
      <a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
      </a>
      <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
      </a>
    </nav>
  </nav>
</aside>

JS：

let drawer = new mdc.drawer.MDCPersistentDrawer(document.querySelector('.mdc-persistent-drawer'));
document.querySelector('.menu').addEventListener('click', () => drawer.open = true);

但他们仍然引用该 mdc 对象并以某种方式访问它。我已经通过以下方式通过 npm 安装了所有 webcomponents：npm install --save material-components-web 并按照此处 (material.io/components/web/) 的说明进行操作。

那么我错过了什么或不理解什么？

感谢您的帮助。

【问题讨论】：

你为什么不使用Angular Material ？仍处于测试阶段并有一些错误，但它非常好。
我尝试过 Angular Material、Material Design Lite 和 Material Design（Web Components，又名 MDC）。使用 Angular Material，我发现它通常无法仅使用工具栏、抽屉、卡片或 *insert 组件等内容正确渲染。现在，这可能是由于我目前的知识水平，所以也许值得建立另一个骨架项目。我想保留一个相当短的截止日期，所以我试图选择能给我带来最佳结果的工具集。此外，我的问题最终与工具集无关，而是与框架有关。

标签： angular mdc

【解决方案1】：

这是我为使基本示例正常工作所做的工作。

npm install --save material-components-web

安装后，您需要更新.angular-cli.json 文件。在样式数组中的"styles.css" 行下方添加"../node_modules/material-components-web/dist/material-components-web.min.css"，并在脚本数组中添加"../node_modules/material-components-web/dist/material-components-web.min.js" 作为条目。

我不熟悉这个 material-components-web 库，但为了保持示例与您的一致，我将 src/index.html 更新为

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TestMcw</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 class="demo-body mdc-typography">
  <app-root></app-root>
</body>
</html>

然后src/app/app.component.html 到

<aside class="mdc-persistent-drawer" #drawer>
      <nav class="mdc-persistent-drawer__drawer">
        <div class="mdc-persistent-drawer__toolbar-spacer"></div>
        <div class="mdc-list-group">
          <nav class="mdc-list">
            <a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
              <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
            </a>
            <a class="mdc-list-item" href="#">
              <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
            </a>
            <a class="mdc-list-item" href="#">
              <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">send</i>Sent Mail
            </a>
            <a class="mdc-list-item" href="#">
              <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">drafts</i>Drafts
            </a>
          </nav>

          <hr class="mdc-list-divider">

          <nav class="mdc-list">
              <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">email</i>All Mail
              </a>
              <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">delete</i>Trash
              </a>
              <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">report</i>Spam
              </a>
            </nav>
          </div>
      </nav>
    </aside>
    <div class="demo-content">
      <header class="mdc-toolbar mdc-elevation--z4">
        <div class="mdc-toolbar__row">
          <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
            <button class="demo-menu material-icons mdc-toolbar__icon--menu" (click)="toggle()">menu</button>
            <span class="mdc-toolbar__title catalog-title">Persistent Drawer</span>
          </section>
        </div>
      </header>

      <main class="demo-main">
        <h1 class="mdc-typography--display1">Persistent Drawer</h1>
        <p class="mdc-typography--body1">Click the menu icon above to open and close the drawer.</p>
      </main>
</div>

最后是src/app/app.component.ts 文件

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

declare var mdc: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('drawer') drawerEl: ElementRef;

  drawer: any;
  ngAfterViewInit(): void {
        const MDCPersistentDrawer = mdc.drawer.MDCPersistentDrawer;
        this.drawer = new MDCPersistentDrawer(this.drawerEl.nativeElement);
        this.drawerEl.nativeElement.addEventListener('MDCPersistentDrawer:open', function() {
          console.log('Received MDCPersistentDrawer:open');
        });
        this.drawerEl.nativeElement.addEventListener('MDCPersistentDrawer:close', function() {
          console.log('Received MDCPersistentDrawer:close');
        });
  }

  toggle() {
    this.drawer.open = !this.drawer.open;
  }
}

这里有很多事情需要注意。 html 中的 #drawer 与 ts 文件中的 @ViewChild('drawer') drawerEl: ElementRef; 配对，无需文档选择器即可为您提供所需的元素。

ts 文件中的declare var mdc: any; 可以帮助您使用 Typescript。很多 npm 包都有对应的 typescript 声明文件，可以按如下方式安装：npm install --save @types/material-components-web，但是这个库似乎没有。 declare 语句让编译器知道有一个名为 mdc 的 var，它的类型为“any”，这意味着不会发生类型推断，因此它可以让您毫无怨言地访问该对象的任何属性。

您可以利用框架来利用 dom 事件（请参阅上面 html 中的（单击）），但我不知道有一种方法可以使用框架为自定义库事件（如“MDCPersistentDrawer:open”）做同样的事情，所以这些仍然需要在 ts 文件中设置，如上所示。

希望这会有所帮助！

更新

回答您的问题：

import 和declare 语句之间的区别。 import 正在利用 JavaScript 的较新模块功能。理想情况下，应该使用这个。如果您使用这种方法，您可以从 .angular-cli.json 文件中删除 "../node_modules/material-components-web/dist/material-components-web.min.js"。如果一切设置正确，那么这将允许 Angular cli 在以 prod 模式构建时在 AOT 期间做一些好事(ng build --prod)。

但是，对于这个特定的库，目前似乎存在一个错误，因为如果您使用这种方法，cli 会给您一个构建错误：Unexpected token: name (MDCTabBarFoundation)。在 angular-cli.json 文件的脚本部分中拥有该 js 文件会将 mdc 变量置于全局范围内，并删除 Angular 对其执行 AOT 的能力，但在这种情况下，它将允许 AOT 继续运行您的应用程序的其余部分。然后，declare 语句告诉 Typescript 该全局变量，因此它不会在编译时抱怨。

他们的官方文档使用ElementRef。我明白你对他们的warning 的看法，但我没有看到任何其他“官方”方式可以达到这种结果。

【讨论】：

感谢您的回答。昨天，在我发布了这个问题之后，我一直在寻找和尝试不同的东西。我发现了一些关键的东西，其中一个是如何获得元素参考，你在这里很好地展示了它，这就是我最终停止的地方。我发现@VeiwChild 是怎么回事，但没有意识到你用“#”指定元素。我还发现你可以import * as mdc from 'material-components-web'; 导入对象变量（？）。我不确定是否首选声明或导入，这可能只是样式选择吗？
另外，这个例子把工具栏放在隐藏的抽屉下面，然后在它上面画幻灯片，这不是任何人想要的。多亏了你，我已经正确地连接起来了，我将不得不玩更多的例子。至于 AfterViewInit，我查看了 Angular 文档，这仅适用于在初始视图呈现后需要查看的任何组件？ Angular 还警告不要使用 ElementRef 直接访问 DOM，这是一个问题吗？我是否应该在某个时候关注这一点并尝试解决其他问题，例如使用 Renderer2？
@BrandonAuthier 我已更新我的答案以解决您的问题。
谢谢。我感谢更新的答案和信息。试图理解一切是如何相互作用和工作的，比我最初想象的要困难得多。它一直在奖励努力和学习，但已经大大减慢了开发速度:) 我将继续努力并尝试了解 Angular 框架的工作原理。
@BrandonAuthier 我刚遇到this article。 #9 讨论使用 Renderer2。我还没有时间尝试，但由于您的问题和我之前不太满意的答案，想让您知道。

主要问题

示例代码

相关代码

缺乏理解