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

【问题标题】：Adding elements to a mat-tab-group element将元素添加到 mat-tab-group 元素
【发布时间】：2018-05-08 12:15:05
【问题描述】：

Angular 5

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

有没有办法在 mat-tab-group 元素中渲染元素（不是选项卡）或图像？

【问题讨论】：

这个问题发布已经一年多了。运气好吗？
@muhammadkashif 抱歉，我不记得我是否已修复此问题并且无法再访问代码：/

标签： angular angular-material2

【解决方案1】：

选项 1

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

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

选项 2

通过遵循此方法，您无法添加材料指令并将 setAttribute 转换为小写，我认为这可以使用命名空间解决，但您仍然不能使用数据绑定、特殊字符（如 '[' 等）方法。

您可以在组件视图初始化后使用 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() {

  }
}

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

【讨论】：