обертка материализует вкладки компонента как угловой компонент - PullRequest
Новая
       10

обертка материализует вкладки компонента как угловой компонент

0 голосов
/ 10 декабря 2018

Я использую Materialize-CSS в качестве библиотеки пользовательского интерфейса.Я пытаюсь его вкладки компонент, чтобы сделать угловой компонент.Это HTML, который мне нужно визуализировать, чтобы использовать компонент materialize-css tabs 

<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)

и даже пользовательский интерфейс не отображается должным образом.Это потому, что только li должно быть в ul, а не в содержимом (div).

Ошибка для css classs active.Но я применил на основе атрибута, и это также отображается на DOM.

Можно ли получить такое же поведение, используя ng-content или мне нужно использовать ContentChildren.Или любым другим способом?

...