收到错误"没有AlertIconAndTypesService的提供者!"

Question

我正在使用带有角度4代码的清晰度模块.使用他们的警告框示例时,我收到上述错误

示例代码

<div class="alert alert-info">
    <div class="alert-items">
        <div class="alert-item">
            <div class="alert-icon-wrapper">
                <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
            </div>
            <span class="alert-text">...</span>
            <div class="alert-actions">
                <a href="..." class="alert-action">Acknowledge</a>
                <a href="..." class="alert-action">Reset to green</a>
            </div>
        </div>
    </div>
    <button type="button" class="close" aria-label="Close">
        <clr-icon aria-hidden="true" shape="close"></clr-icon>
    </button>
</div>

错误堆栈详细信息

错误错误:未捕获(在承诺中):错误:没有AlertIconAndTypesService的提供程序!错误:没有AlertIconAndTypesService的提供者!at injectError(core.es5.js:1169)atNisProviderError(core.es5.js:1207)at ReflectiveInjector_.webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.throwOrNull(core.es5.js:2649)在ReflectiveInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault(core.es5.js:2688)在ReflectiveInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey(core.es5.js:2620)at RefinInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.get(core.es5.js:2489)at resolveNgModuleDep( core.es5.js:9475)at NdModuleRef_.webpackJsonp .../../../core/@angular/core.es5.js.NgModuleRef_.get(core.es5.js:10557)at resolveDep(core. es5.js:11060)在injectClass(core.es5.js:10913)的injectError(core.es5.js:1169),在noProviderError(core.es5.js:1207),在ReflectiveInjector_.webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.throwOrNull(core.es5.js:2649)在ReflectiveInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault(core.es5.js:2688)在ReflectiveInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey(core.es5.js:2620)at RefinInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_.get(core.es5.js:2489)at resolveNgModuleDep( core.es5.js:9475)at NdModuleRef_.webpackJsonp .../../../core/@angular/core.es5.js.NgModuleRef_.get(core.es5.js:10557)at resolveDep(core. es5.js:11060)在resolveClass(core.es5.js:10913)at resolvePromise(polyfills.bundle.js:3328)at resolvePromise(polyfills.bundle.js:3299)atpolyfills.bundle.js:3376 at ZoneDelegate. webpackJsonp .../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask(polyfills.bundle.js:2969)at Object.onInvokeTask(core.es5.js:3881)at at Zone.webpackJsonp中的ZoneDelegate.webpackJsonp .../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask(polyfills.bundle.js:2968).../.. /. ./../zone.js/dist/zone.js.Zone.runTask(polyfills.bundle.js:2736)在drainMicroTaskQueue(polyfills.bundle.js:3140)at at

Answer 1

该问题实际上在Clarity网站上警报文档中 "代码和示例"标题下的大红框中描述.

所以你需要做两件事之一:

1:将警报转换为clr-alert组件.

<clr-alert>
    <!-- "info" is the default -->
    <div clr-alert-item class="alert-item">
        <!-- clr-alert-item is optional at this time; maybe not later... -->
        <!-- note that the .alert-items wrapper is not need with clr-alert -->
        <div class="alert-icon-wrapper">
            <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
        </div>
        <span class="alert-text">...</span>
        <div class="alert-actions">
            <a href="..." class="alert-action">Acknowledge</a>
            <a href="..." class="alert-action">Reset to green</a>
        </div>
    </div>
    <!-- the close button is also included in the component -->
</clr-alert>

2:使用.staticclassname让AlertComponent忽略您的直接HTML警报.

<div class="alert alert-info">
    <div class="alert-items">
        <div class="alert-item static">
            <!-- .static hides the alert-item from the Angular component lookup -->
            <div class="alert-icon-wrapper">
                <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
            </div>
            <span class="alert-text">...</span>
            <div class="alert-actions">
                <a href="..." class="alert-action">Acknowledge</a>
                <a href="..." class="alert-action">Reset to green</a>
            </div>
        </div>
    </div>
    <button type="button" class="close" aria-label="Close">
        <clr-icon aria-hidden="true" shape="close"></clr-icon>
    </button>
</div>

Answer 2

根据错误提示，将AlertIconAndTypesService服务导入您的模块中

所以在你的app.module.ts文件中

import { AlertIconAndTypesService } from "clarity-angular/emphasis/alert/providers/icon-and-types-service";

....
@NgModule({
...
providers:['AlertIconAndTypesService']
...
})