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

Question

Angular 5

我想在 mat-tab-group 元素的标题栏中实现一个搜索栏(即，标签名称所在的行)

有什么方法可以在 mat-tab-group 元素中呈现元素(不是选项卡)或图像吗？

Answer 1

选项 1

将边距添加到 ma​​t-tab-body-wrapper 类(如果您不能在组件样式表中覆盖它，请在根样式表中覆盖它)并使用绝对位置适合元素 margin ，这是简单的方法，优点是您也可以应用 Material 指令。

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

选项 2

按照这个方法你不能添加 Material 指令和setAttribute转换为小写，我认为可以使用命名空间解决，但是你仍然不能使用数据绑定(bind)，特殊字符如'['等方法。

您可以在组件 View 初始化后使用Renderer2 类添加元素。尽管您可以使用 JavaScript 执行相同的操作，但不推荐这样做，因为 Renderer2 DOM 操作将由 angular 处理并且不会中断。

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

  }
}

这两种方法都会给出以下结果，标签上的静态搜索栏也会切换。