Главный вопрос
Основная проблема, с которой я столкнулся, заключается в понимании того, как используется определенная строка кода, а именно объект mdc (ниже в приведенном примере кода) в документации MDC Webcomponent Drawer. По-видимому, я не могу размещать более 2 ссылок, потому что у меня недостаточно очков «репутации» bs. Поэтому я не могу связать все исследования, которые я действительно провел, чтобы найти ответ для себя... Таким образом, пример Drawer является рабочим примером и исходным кодом из него. Я прочитал эти конкретные ресурсы:
- Веб-компоненты Drawer
- Пример ящика
- Исходный код примера ящика
- Материальные компоненты Веб-компоненты mdc-drawer Github Проект< /а>
- И некоторые другие различные переполнения стека, примеры github и проекты
Пример кода
Ниже приведен код целиком. Если бы я вставил это непосредственно в файл "index.html" в каталоге src/ проекта angular4, он работал бы правильно, поэтому я явно не понимаю, как получить доступ к mdc объект, который, по-видимому, исходит из файла material-web-components.js. Я думаю, что каким-то образом мне нужно сделать объект mdc в этом файле .js доступным для моего проекта angular4, и я довольно много исследовал это, но, вероятно, я не задаю правильный вопрос. Во всех примерах просто говорится: используйте сеть доставки контента (CDN) или ссылайтесь на нее локально в своем проекте через каталог ./assets/ или через папку node_modules/. Я могу получить доступ к файлу .js либо через CDN, либо через локальные ресурсы/ссылку, но он доступен только в этом файле index.html верхнего уровня. Если я попытаюсь использовать его в любой другой части проекта angular4, например, в корневом компоненте приложения, он не будет подключен или не работает. Нужно ли мне сделать это доступным где-то, например, в файле конфигурации, 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 следующим образом: npm install --save material-components-web и следовал инструкциям здесь (material.io/components/web/), как начать работу.
Так что я упускаю или не понимаю?
Спасибо за любую помощь.
