將元素添加到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

通過遵循這個方法你不能添加材料指令和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() {

  }
}

這兩種方法都會給出以下結果，並且選項卡上的靜態搜索欄也會切換。