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

Question

所以我尝试使用这里的解决方案：https://stackoverflow.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)

Answer 1

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

所以不是

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

你需要做的

<div #collapsible></div>