接下来实现多个选项卡（V1）？

Question

在使用 Materialize v1 和 angular 时，我无法在同一页面中使用多个选项卡。

这是我的app.component.ts：

`

/* import { Component } from '@angular/core'; */
import { Component, OnInit } from '@angular/core';
import 'materialize-css';
declare var M: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app';

  ngOnInit() {
    const instanceSidenav = new M.Sidenav(document.querySelector('.sidenav'));
    const instanceTab = new M.Tabs(document.querySelector('.tabs'));
  }
}

`

sidenav 菜单有效，甚至页面中的第一个选项卡有效，但第二个选项卡无效。我把第一个变成了第二个，新的第二个标签也出现了同样的情况。

没有jquery我能做什么？

Answer 1

我找到了一种使其工作的方法：我没有以在 document.querySelector('.tabs') 内使用 class 选择器的官方文档方式初始化选项卡，而是以这种方式使用 ids 选择器 document.querySelector('#tab1').

在我认为问题需要更好的方法之前，这对我有用。

接下来实现多个选项卡（V1）？

Multiple tabs with materialize next (V1)?

materialize

angular5