在 Angular 5 中使用 materialize-css (v 1.0.0) 不起作用

Posted 2023-02-22

【中文标题】在 Angular 5 中使用 materialize-css (v 1.0.0) 不起作用

【英文标题】：Using materialize-css (v 1.0.0) in Angular 5 does not work

【发布时间】：2018-09-25 21:38:05

【问题描述】：

所以我尝试使用这里的解决方案：https://***.com/a/48058897/9642 但是，那没有用。我自然地使用 Angular 和 Typescript。

我的打字稿课：

从“@angular/core”导入组件、OnInit、AfterViewInit、ViewChild、ElementRef； 从 'materialize-css/dist/js/materialize' 导入 * 作为 M； @零件（ 选择器：'app-list-nav', templateUrl: './list-nav.component.html', styleUrls: ['./list-nav.component.css'] ) 导出类 ListNavComponent 实现 OnInit、AfterViewInit @ViewChild('collapsible') elCollapsible: ElementRef; 构造函数（） ngOnInit() ngAfterViewInit() const instanceCollapsible = new M.Collapsible(this.elCollapsible.nativeElement, );

在 HTML 部分，元素的 ID 为“collabsible”，类为“collabsible”。 然而我得到了这个错误：

ng:///AppModule/ContentComponent.ngfactory.js:12 错误类型错误：无法读取未定义的属性“nativeElement” 在 ListNavComponent.ngAfterViewInit (webpack-internal:///../../../../../src/app/list-nav/list-nav.component.ts:20) 在 callProviderLifecycles (webpack-internal:///../../../core/esm5/core.js:12922) 在 callElementProvidersLifecycles (webpack-internal:///../../../core/esm5/core.js:12889) 在 callLifecycleHooksChildrenFirst (webpack-internal:///../../../core/esm5/core.js:12872) 在 checkAndUpdateView (webpack-internal:///../../../core/esm5/core.js:14027) 在 callViewAction (webpack-internal:///../../../core/esm5/core.js:14369) 在 execComponentViewsAction (webpack-internal:///../../../core/esm5/core.js:14301) 在 checkAndUpdateView (webpack-internal:///../../../core/esm5/core.js:14024) 在 callViewAction (webpack-internal:///../../../core/esm5/core.js:14369) 在 execEmbeddedViewsAction (webpack-internal:///../../../core/esm5/core.js:14327)

【参考方案1】：

您不能通过 css id 查询@ViewChild。您需要添加模板变量。

所以不是

<div id="collapsible"></div>

你需要做的

<div #collapsible></div>