mdc.snackbar.MDCSnackbar() throws this2.root_.querySelector is not a function 错误

Question

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

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

错误堆栈如下：

Uncaught TypeError: this2.root.querySelector is not a function
at getActionButton (material-components-web.js:3144)
at Object.registerActionClickHandler (material-components-web.js:3174)
at MDCSnackbarFoundation.init (material-components-web.js:8572)
at MDCSnackbar.MDCComponent (material-components-web.js:587)
at new MDCSnackbar (material-components-web.js:3123) at :1:11

我有以下 html 小吃店代码段：

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

如能提供我可能做错的线索，将不胜感激。

Answer 1

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

Answer 2

试试：

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

mdc.snackbar.MDCSnackbar() throws this2.root_.querySelector is not a function 错误

mdc.snackbar.MDCSnackbar() throws this2.root_.querySelector is not a function error

javascript

angularjs

web-component

material-components