Question

我想使用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>

有可能吗？请让我知道

Answer 1

您共享的代码使ng-content用法倒退了。n将在父级，<custom-tabs-group>在子级。

我尝试了2种方法：

策略＃1 ：将内容传递给<ng-content>内的自定义子级...有效
策略＃2 ：将内容传递到<mat-tab>位于子项中的自定义子项中...这不起作用

您可以check the demo here

Answer 2

实际上，我发现了一些破解方法，但我不知道它是否是一个很好的方法

custom-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-tabs-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”。现在，我可以使用我自己的自定义标签来构建带有动态标签的角材料标签。欢迎有更好方法的人分享他们的想法。谢谢

如何使用“角度材质”选项卡制作自定义选项卡？

2 个答案: