Question

我正在使用Materialize-CSS作为UI库。我正在尝试使用它的tabs组件来制作Angular组件。这是我需要渲染才能使用materialize-css选项卡组件的HTML

<ul class="tabs" #qwcTabs>
    <li class="tab"><a href="#123456789">Test 1</a></li>
    <li class="tab"><a class="active" href="#test2">Test 2</a></li>
    <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
    <li class="tab"><a href="#test4">Test 4</a></li>
</ul>
<div id="123456789">Test 1s</div>
<div id="test2">Test 2</div>
<div id="test3">Test 3</div>
<div id="test4">Test 4</div>

我创建了这样的MyTabs组件进行包装

mytabs.component.ts

import * as M from "materialize-css/dist/js/materialize";
@Component({
    selector: "my-tabs",
    templateUrl: "./my-tabs.component.html"
})
export class MyTabs implements AfterViewInit {

    @ViewChild("myTabs")
    elTabs: ElementRef;

    objTabs: M.Tabs;

    ngAfterViewInit() {
        this.objTabs = new M.Tabs(this.elTabs.nativeElement, {});
    }

}

mytabs.component.html

<ul class="tabs" #qwcTabs>
    <ng-content select="qwc-tab"></ng-content>
</ul>

mytab.component.ts

@Component({
    selector: "my-tab",
    templateUrl: "./my-tab.component.html"
})
export class MyTab {

    randomId: Number;

    isActiveTab: boolean = this.hasHostAttributes("my-tab--active");

    constructor(private _hostEl: ElementRef) {
        this.randomId = new Date().getTime();
    }

    /** Gets whether the tab has one of the given attributes. */
    hasHostAttributes(...attributes: string[]) {
        return attributes.some(attribute => this._hostEl.nativeElement.hasAttribute(attribute));
    }

}

mytab.component.html

<li class="tab">
    <a [attr.href]="'#' + randomId" [ngClass]="{'active': isActiveTab}">
        <ng-content select="tab-heading"></ng-content>
    </a>
</li>
<div [attr.id]="randomId">
    <ng-content select="tab-content"></ng-content>
</div>

这就是我的使用方式

<my-tabs>
   <my-tab>
       <tab-heading>Users</tab-heading>
       <tab-content>Users Data</tab-content>
   </my-tab>
   <my-tab my-tab--active>
       <tab-heading>Groups</tab-heading>
       <tab-content>Roles Data</tab-content>
   </my-tab>
</my-tabs>

在DOM上呈现为

<my-tabs>
  <ul class="tabs">
    <my-tab>
      <li class="tab"><a ng-reflect-ng-class="[object Object]" href="#1544436809563">
          <tab-heading>Users</tab-heading>
        </a></li>
      <div id="1544436809563">
        <tab-content>Users Data</tab-content>
      </div>
    </my-tab>
    <my-tab qwc-tab--active="">
      <li class="tab"><a class="active" ng-reflect-ng-class="[object Object]" href="#1544436809620">
          <tab-heading>Groups</tab-heading>
        </a></li>
      <div id="1544436809620">
        <tab-content>Roles Data</tab-content>
      </div>
    </my-tab>
  </ul>
</my-tabs>

控制台上有错误

ERROR TypeError: Cannot read property 'classList' of undefined
    at Tabs._setupActiveTabLink (materialize.js:4200)
    at new Tabs (materialize.js:4007)
    at QwcTabs.ngAfterViewInit (qwc-tabs.component.js:55)
    at callProviderLifecycles (VM42851 core.js:21322)
    at callElementProvidersLifecycles (VM42851 core.js:21296)
    at callLifecycleHooksChildrenFirst (VM42851 core.js:21286)
    at checkAndUpdateView (VM42851 core.js:22222)
    at callViewAction (VM42851 core.js:22454)
    at execComponentViewsAction (VM42851 core.js:22396)
    at checkAndUpdateView (VM42851 core.js:22219)

，甚至UI也无法正确呈现。这是因为只有li应该在ul中而不是内容（div）中。

该错误适用于CSS类active。但是我已经基于属性进行了应用，并且它也在DOM上呈现。

是否可以使用ng-content获得相同的行为，或者我需要使用ContentChildren。还是其他方式？

将实现选项卡的组件包装为Angular Component

0 个答案: