mdc.snackbar.MDCSnackbar() 抛出 this2.root_.querySelector is not a function 错误答案

【问题标题】：mdc.snackbar.MDCSnackbar() throws this2.root_.querySelector is not a function errormdc.snackbar.MDCSnackbar() 抛出 this2.root_.querySelector is not a function 错误
【发布时间】：2017-11-27 14:47:18
【问题描述】：

我在一个角度组件中创建一个新的 MDCSnackbar 对象的那一行出现以下错误：

let snackbar = new mdc.snackbar.MDCSnackbar(document.getElementsByClassName('mdc-snackbar')).

错误堆栈如下：

未捕获的类型错误：this2.root.querySelector 不是函数
在 getActionButton (material-components-web.js:3144)
在 Object.registerActionClickHandler (material-components-web.js:3174)
在 MDCSnackbarFoundation.init (material-components-web.js:8572)
在 MDCSnackbar.MDCComponent (material-components-web.js:587)
在新的 MDCSnackbar (material-components-web.js:3123) 在:1:11

我有以下用于小吃店的 html sn-p：

<div class="mdc-snackbar"
 aria-live="assertive"
 aria-atomic="true"
 aria-hidden="true">
 <div class="mdc-snackbar__text"></div>
 <div class="mdc-snackbar__action-wrapper">
     <button type="button" class="mdc-button mdc-snackbar__action-button">
     </button>
</div>

非常感谢我可能做错了什么的线索。

【问题讨论】：

标签： javascript angularjs web-component material-components

【解决方案1】：

将语句更改为new mdc.snackbar.MDCSnackbar(document.querySelector('.mdc-snackbar') 解决了它。

【讨论】：

【解决方案2】：

试试看：

var x = new mdc.snackbar.MDCSnackbar(document.querySelector('.mdc-snackbar'));
x.open();

【讨论】：