Как я могу сделать пользовательские вкладки, используя угловые вкладки материалов? - PullRequest
Новая
       29

Как я могу сделать пользовательские вкладки, используя угловые вкладки материалов?

1 голос
/ 10 мая 2019

Я хочу использовать библиотеку Angular Material и создать свою собственную библиотеку с некоторыми индивидуальными проектами.Но сталкиваются с некоторыми проблемами при разделении материальных компонентов.Я думаю, что проблема с теневым DOM.Вот код, которого я хочу достичь.

Код

custom-tabs-group.html -parent 

<div class="custom-tabs">
  <mat-tab-group disableRipple>
    <ng-content></ng-content>
  </mat-tab-group>
</div>

custom-tabs.html -child 

<custom-tabs-group [tabContent]="tabContent">
  <mat-tab *ngFor="let tab of tabContent" label="{{tab.title}}">{{tab.content}} </mat-tab>
</custom-tabs-group>

это вообще возможно?Пожалуйста, дайте мне знать

Ответы [ 2 ]

1 голос
/ 10 мая 2019

код, которым вы поделились, получил использование ng-контента в обратном направлении ... <custom-tabs-group> будет на родительском уровне и <ng-content> на дочернем уровне.

Я пробовал 2 подхода:

  • стратегия # 1 : передать содержимое пользовательскому дочернему элементу внутри <mat-tab> ... это сработало
  • стратегия # 2 : передать содержимое пользовательскому дочернему элементу, где <mat-tab> находится внутри дочернего элемента ... это не сработало

вы можете посмотреть демо здесь

0 голосов
/ 10 мая 2019

На самом деле я понял это с помощью некоторого хака, я не знаю, хороший ли это подход или нет

заказ tabs.component.html 

<div class="custom-tabs">
  <mat-tab-group disableRipple>
    <mat-tab *ngFor="let tab of tabsContentList" label="{{tab.label}}">
      <div [innerHTML]="tab.htmlContent"></div>
    </mat-tab>
  </mat-tab-group>
</div>

Custom-Вкладки-component.ts 

import { DomSanitizer } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, AfterContentInit, ContentChildren, Input, ViewChild, ElementRef, QueryList } from '@angular/core';


@Component({
  selector: 'il-tabs-content',
  template: `
      <div #content>
         <ng-content></ng-content>
       </div>
       `
  ,
})
export class TabsContentComponent implements OnInit {
  @Input() label: String;
  @ViewChild('content') set content(content: ElementRef) {
    console.log("block three", content)
    this.htmlContent = content;
    if (this.htmlContent) {
      this.htmlContent = this.htmlContent.nativeElement.innerHTML;
    }
  }

  htmlContent: any;
  constructor() { }
  ngOnInit() {
  }

}

@Component({
  selector: 'il-tabs-group',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class TabsGroupComponent implements OnInit, AfterContentInit {
  @ContentChildren(TabsContentComponent) tabsContentList: QueryList<TabsContentComponent>;

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {

  }
  ngAfterContentInit() {
    this.tabsContentList.forEach((tabInstance) => {
      var sanEle = this.sanitizer.bypassSecurityTrustHtml(tabInstance.htmlContent)
      tabInstance.htmlContent = sanEle;
      return tabInstance
    })
  }
}

использование 

  <il-tabs-group>
    <il-tabs-content label="hello-1">
      <h1>hello-1 content</h1>
    </il-tabs-content>
    <il-tabs-content label="hello-2">
      <h1>hello-2 content</h1>
    </il-tabs-content>
    <il-tabs-content label="hello-3">
      <h1>hello-3 content</h1>
      <h2>extra content</h2>
    </il-tabs-content>
  </il-tabs-group>

я определил два компонента 'il-tabs-content' и 'li-tabs-group'. теперь я могу использовать собственные пользовательские вкладки поверх угловых материалов с динамическими вкладками. Любой с лучшим подходом может поделиться своими идеями. спасибо

...