将元素添加到mat-tab-group元素

Question

Angular 5

我想在mat-tab-group元素的标题栏中实现一个搜索栏（即选项卡名称所在的行）

有没有办法在mat-tab-group元素中渲染元素（不是制表符）或图像？

Answer 1

选项1

将边距添加到 mat-tab-body-wrapper 类中（如果您不能在组件样式表中覆盖它，则在根样式表中覆盖它），并在其中使用绝对位置适合元素边距，这是简单的方法，优点是您也可以应用物料指令。

.mat-tab-body-wrapper {
    margin-top: 60px !important;
  }

选项2

通过这种方法，您不能添加material指令并将setAttribute转换为小写字母，我认为可以使用名称空间解决，但是您仍然不能使用数据绑定，特殊字符（例如“ [”等）方法。

您可以在组件视图初始化后使用 Renderer2 类添加元素。尽管您可以使用JavaScript进行全部操作，但不建议您这样做，因为Renderer2 DOM操作将由角度处理并且不会中断。

component.html

<mat-tab-group mat-align-tabs="center" #navigationElement>
  <mat-tab label="Tab-A">A Body</mat-tab>
  <mat-tab label="Tab-B">B Body</mat-tab>
  <mat-tab label="Tab-c">C Body</mat-tab>
</mat-tab-group>

component.ts

export class HomeNavComponent implements OnInit, OnDestroy, AfterViewInit {

  @ViewChild('navigationElement', { static: false }) navEl: any;

  constructor(private rendrer: Renderer2) { }

  ngOnInit() {
  }

  ngAfterViewInit() {


    const searchElWrapper = this.rendrer.createElement('div');

    const searchInEl = this.rendrer.createElement('input');
    this.rendrer.setAttribute(searchInEl, 'placeholder', 'Search');
    this.rendrer.addClass(searchInEl, 'searchWrapper');
    this.rendrer.appendChild(searchElWrapper, searchInEl);

    const parentEl = this.navEl._elementRef.nativeElement;
    this.rendrer.insertBefore(parentEl, searchElWrapper, parentEl.childNodes[1]);
  }

  ngOnDestroy() {

  }
}

这两种方法都将给出以下结果，同时选项卡上的静态搜索栏也会切换。