角度组件按钮不可点击答案

【问题标题】：Angular component button not clickable角度组件按钮不可点击
【发布时间】：2019-05-08 21:16:43
【问题描述】：

当发生错误时，我在主页中显示了一个警报组件。这是我的 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 我只有：

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

警报已正确显示，但关闭按钮不可点击。未应用悬停类。这就像点击事件没有被捕获。我尝试在按钮和跨度上使用 z-index，但没有任何变化。有什么建议吗？

【问题讨论】：

尝试去掉按钮标签中的跨度。然后在按钮标签之间添加一些文本，例如“关闭”。
我刚刚在codesandbox上试过了，效果很好：codesandbox.io/embed/8nkpjo9xm2

标签： angular button

【解决方案1】：

据我所知，您似乎已将此警报 html 嵌入到另一个页面中。理想情况下，警报应该是它自己的组件 (read this)。这将避免将“警报”对象传递给关闭函数的需要，并且可能会解决按钮不可点击的问题。然后，您可以使用selectors, inputs and emitters 作为基础，将对此警报组件的引用嵌入到另一个组件中并传递输入、输出（如有必要）。

【讨论】：