个人中心
gpt4 book ai didi

angular - 了解 Angular 4 框架和 MDC Webcomponent : Drawer

转载 作者：太空狗 更新时间：2023-10-29 18:30:58 25 4
gpt4 key购买 nike

主要问题

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

  • 网络组件 Drawer
  • 抽屉示例
  • 抽屉示例源代码
  • Material 组件 Web 组件 mdc-drawer Github Project
  • 以及其他一些各种stack overflow、github示例和项目

示例代码

以下是完整的代码。如果我将其直接粘贴到 angular4 项目的 src/目录中的“index.html”文件中，它可以正常工作，所以显然我不明白如何访问 mdc 对象似乎来自 material-web-components.js 文件。我认为我需要以某种方式使该 .js 文件中的 mdc 对象可用于我的 angular4 项目，并且我对此进行了相当多的研究，但我可能没有问正确的问题。在所有示例中，它只是说使用内容交付网络 (CDN) 或通过 ./assets/目录或通过 node_modules/文件夹在您的项目中本地引用它。我可以通过 CDN 或本地 Assets /引用访问 .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>

相关代码

相关行是:var MDCPersistentDrawer = mdc.drawer.MDCPersistentDrawer;
并且无法识别 mdc 对象。

具体代码如下:

      <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>

缺乏理解

我是 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/) 的说明开始操作。

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

感谢您的帮助。

最佳答案

这是我为使一个基本示例起作用所做的工作。

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 文件中设置这些内容，如上所示。

希望这对您有所帮助!

更新

回答您的问题:

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

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

  1. 他们的官方文档使用 ElementRef .我明白你在说他们的 warning ，但我看不到任何其他“官方”方式可以实现此类结果。

关于angular - 了解 Angular 4 框架和 MDC Webcomponent : Drawer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45068789/

25 4 0
文章推荐： python - 实时统计分析
文章推荐： angular - 将多个请求合并为一个请求并在 Angular 2 中仅点击一次 api
文章推荐： python - 如何在一些数据结构中表示一个奇怪的图
文章推荐： angular - 在发出两个可观察对象的第一个值后，Zip 不发出值
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com