Как условно добавить директиву Angular Material

Question

Использование Angular 5 и Angular Material 5.

Я хочу условно добавить директиву mat-button или mat-menu-item.

Я делаю это с помощью директивы.

@Directive({
  selector: '[dynamic-attr]'
})
export class DynamicAttrDirective {
  @Input('dynamic-attr') attr: string;
  private _el: ElementRef;

  constructor(el: ElementRef,  private _renderer: Renderer) {
    this._el = el;
  }

  ngOnInit() {
    if (this.attr === '') return null;
    const node = document.createAttribute(this.attr);
    this._el.nativeElement.setAttributeNode(node);
  }
}

Примерно так:

<button dynamic-attr="{{ isCollapsed ? 'mat-menu-item' : 'mat-button'}}" [routerLink]="['/about']">About</button>

Но хотя при этом визуализируется атрибут в результирующей разметке, стилизация материала и дополнительная разметка (для ряби и т. Д.) Не применяются.

  <div _ngcontent-c1="" app-nav-menu="" ng-reflect-is-collapsed="false"><button tabindex="0" ng-reflect-router-link="/about" mat-button="" ng-reflect-attr="mat-button">About</button>

Я предполагаю, что нужно что-то вроде $ compile из AngularJS.

Как я могу это сделать?

ПРИМЕЧАНИЕ: В идеале я хочуизбегайте использования if / else.Я хотел бы написать код для кнопок один раз и просто переключить директиву (mat-button / mat-menu-item)

ОБНОВЛЕНИЕ: Проблема, которую я пытаюсь решить,удаление дублированного списка кнопок в этой панели навигации.Панель навигации состоит из двух панелей инструментов: одна на рабочем столе, другая на мобильном.Я не хочу включать кнопки в каждую панель инструментов, я бы предпочел использовать общий шаблон / директиву / компонент.Но для кнопок требуется отдельная директива материала на каждой панели инструментов.

<mat-toolbar color="primary" class="full-size">
    <span>
        <a [routerLink]="['/']">Brand</a>
    </span>
    <span class="fill-remaining-space"></span>
    <button mat-button [routerLink]="['/demo']">Demo</button>
    <button mat-button [routerLink]="['/about']">About</button>
    <button mat-button color="accent" [routerLink]="['/signup']">Sign Up</button>
</mat-toolbar>

<mat-toolbar color="primary" class="compressed">
    <span>
        <a [routerLink]="['/']">Brand</a>
    </span>

    <span class="fill-remaining-space"></span>

    <button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu">
        <div app-nav-menu [isCollapsed]="true"></div>
        <button mat-menu-item [routerLink]="['/demo']">Demo</button>
        <button mat-menu-item [routerLink]="['/about']">About</button>
        <button mat-menu-item color="accent" [routerLink]="['/signup']">Sign Up</button>
    </mat-menu>
</mat-toolbar>

Что я надеюсь исправить с помощью чего-то вроде: ... .... ....

Answer 1

Используйте это вместо:

<button *ngIf="isCollapsed;else matButton" ng dynamic-attr="mat-menu-item" 
[routerLink]="['/about']">About</button>

<ng-template #matButton>
  <button *ngIf= "isCollapsed == false" ng dynamic-attr="mat-button" 
  [routerLink]="['/about']">About</button>
</ng-template>

Answer 2

Если вам нужно только изменить стиль, вы можете добавить ngClass и переопределить текущий класс, добавленный директивой.Например:

      <button mat-stroked-button [ngClass]="{'mat-raised-button': view === 'show'}"
    color="primary" (click)="switchView('show')">Show</button>
      <button mat-stroked-button [ngClass]="{'mat-raised-button': view === 'edit'}"
    color="primary" (click)="switchView('edit')">Edit</button>

В этом примере вы устанавливаете кнопки на mat-stroked-button, но в зависимости от вида это меняет стиль на mat-поднял-button.

Answer 3

<button *ngIf="isCollapsed == true" ng dynamic-attr="mat-menu-item" [routerLink]="['/about']">About</button>

<button *ngIf= "isCollapsed == false" ng dynamic-attr="mat-button" [routerLink]="['/about']">About</button>