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

Question

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

我的打字稿类：

从“@angular/core”导入 { Component, OnInit, AfterViewInit, ViewChild, ElementRef };
import * as M from 'materialize-css/dist/js/materialize';

@成分（{
    选择器：“应用列表导航”，
    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)

Answer 1

无法@ViewChild通过 css id 进行查询。您需要添加模板变量。

所以而不是

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

你需要做

<div #collapsible></div>