Кнопка углового компонента не активируется

Question

На главной странице отображается компонент оповещения, когда произошла ошибка.Это мой alert.html:

<div class="alert-body" *ngIf="error">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="close(alert)">
        <span aria-hidden="true">×</span>
    </button>
    <div class="alert-title">{{alert.title}}</div>
    {{alert.message}}
</div>

А это мой alert.ts:

export class AlertComponent implements OnInit {
    error: boolean;
    ...
    close(alert) {
        console.log('close alert');
        // do stuff
        this.error = false;
    }
}

В css:

.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5;
}

button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
}

В app.component Iпросто наберите:

...
<app-alert></app-alert>
...

Предупреждение отображается правильно, но кнопка закрытия не активна.Класс наведения не применяется.Это как событие щелчка не ловит.Я попытался с z-index на кнопке и промежутке, но ничего не изменилось.Любое предложение?

Answer 1

Насколько я могу судить, похоже, что вы встроили этот HTML-код оповещения в другую страницу.В идеале оповещение должно быть собственным компонентом ( прочитайте это ).Это избавило бы от необходимости передавать объект «alert» в функцию close и, вероятно, решило бы проблему отсутствия нажатия кнопки.Затем вы можете использовать селекторы, входы и излучатели в качестве основы для встраивания ссылки на этот компонент оповещения в другой компонент и передачи входов, выходов (при необходимости).