我使用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
. 还是其他任何方式?