Скрыть элементы угловой директивы для определенных ситуаций

Question

Будучи директивой под названием my-directive. Шаблон директивы содержит 2 элемента:

<div>
    <!-- element1 -->
</div>
<div>
    <!-- element2 -->
</div>

Добавление его в другой html-файл выполняется с помощью:

<app-my-directive></app-my-directive>

Мой вопрос заключается в том, существует ли способ заставить эту директиву показыватьтолько element1, если он добавлен в определенный HTML, но в противном случае показать все его элементы?

Answer 1

Вы можете отправить вход, чтобы определить, какой элемент отображать:

@Component({
  selector: 'my-directive',
  inputs: ['myCondition'],
  template: `
    <div *ngIf="myCondition">
        <!-- element1 -->
    </div>
    <div *ngIf="!myCondition">
        <!-- element2 -->
    </div>
  `
})
class MyDirective {
    myCondition: boolean;
}

Answer 2

Вы можете попробовать это:

import { Component, OnInit, Input} from '@angular/core';
    @Component({
      selector: 'my-directive',
      template: `
        <div *ngIf="myCondition">
            <!-- element1 -->
        </div>
        <div *ngIf="!myCondition">
            <!-- element2 -->
        </div>
      `
    })
    class MyDirective {
        @Input() myCondition: boolean;
    }