Angular 将图元添加到mat选项卡组图元

角度5 我想在mat tab组元素的标题栏中实现一个搜索栏（即，存在选项卡名称的行）

---

有没有办法在mat选项卡组元素中呈现元素（不是选项卡）或图像？

选项1

将边距添加到mat选项卡body wrapper类中（如果无法在组件样式表中替代，请在根样式表中替代），并使用边距中的绝对位置拟合元素，这是一种简单的方法，优点是还可以应用材质指令

.mat选项卡车身包装器{
利润上限：60px！重要；
}

选项2

通过使用此方法，您无法添加material指令和setAttribute转换为小写，我认为可以使用名称空间解决此问题，但您仍然无法在此方法中使用数据绑定，如“[”等特殊字符

组件视图初始化后，您可以使用RenderR2类添加元素。尽管您可以使用JavaScript执行相同的操作，但不建议这样做，因为RenderR2 DOM操作将由angular处理，不会中断

component.html

身体
B体
C体

组件。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() {

  }
}

这两种方法都将给出以下结果，并在选项卡上切换静态搜索栏

---

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