主要问题

Question

主要问题

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

网络组件Drawer
抽屉示例
抽屉示例源代码
材料组件Web组件mdc-drawer Github Project
以及其他一些堆栈溢出，github示例和项目

示例代码

以下是完整的代码。如果我将它直接粘贴到angular4项目的src /目录中的“index.html”文件中，它可以正常工作，因此很明显我不明白如何访问 mdc 看似来自 material-web-components.js 文件的对象。我想某种方式我需要在我的angular4项目中使用该.js文件中的mdc对象，我已经研究了很多，但我可能没有问正确的问题。在所有示例中，它只是说使用内容交付网络（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以及集成Material Design工具集的新手。我一直在教自己几个月，我正在努力将所有这一切的基础理解在一起。我已经完成并构建了整个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/）了解如何开始。

那么我缺少什么或不理解？

感谢您的帮助。

Answer 1

以下是我要做的基本示例。

npm install --save material-components-web

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

我不熟悉这个材料 - 组件 - 网络库，但为了使示例与您的一致，我将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，它的类型为＆＃39; any＆＃39;这意味着不会发生类型推断，因此它可以让您访问该对象上的任何属性而无需投诉。

您可以利用框架来访问dom事件（请参阅上面的html中的（点击）），但我并不知道如何使用自定义库事件的框架来做同样的事情，例如＆＃39 ; MDCPersistentDrawer：open＆＃39;，所以仍需要在ts文件中设置，如上所示。

希望这有帮助！

<强>更新

回答你的问题：

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

但是，对于这个特定的库，目前似乎存在一个错误，因为如果你使用这种方法，cli会给你一个构建错误：Unexpected token: name (MDCTabBarFoundation)。在angular-cli.json文件的脚本部分中使用该js文件会将mdc变量放在全局范围内，并删除Angular对其执行AOT的功能，但在这种情况下，它将允许AOT继续运行你申请的其余部分。然后声明语句告诉Typescript关于那个全局变量，所以它不会在转换时间内抱怨。

他们的官方文档使用ElementRef。我看到你对他们的warning所说的话，但是我没有看到任何其他的官员＆＃39;实现这种结果的方法。

理解Angular 4 Framework和MDC Web组件：抽屉

主要问题

示例代码

相关代码

缺乏理解

1 个答案: