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中，我简单地拥有：

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

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

Answer 1

据我所知，您似乎已将此警报html嵌入到另一页中。理想情况下，警报应该是其自己的组件（read this）。这样可以避免将'alert'对象传递给close函数，并可能解决按钮不可单击的问题。然后，您可以使用selectors, inputs and emitters作为将对该警报组件的引用嵌入另一个组件并传递输入，输出（如果需要）的基础。

角组件按钮不可单击

1 个答案: