Question

我正在使用带有角度4代码的清晰度模块。使用他们的alert box示例时，我收到了上述错误

示例代码

<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 injectionError（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）在ReflectiveInjector .webpackJsonp ... / .. / .. / core/@angular/core.es5.js.ReflectiveInjector_.get （core.es5.js：2489） at resolveNgModuleDep（core.es5.js：9475）在NgModuleRef_.webpackJsonp ... / .. / .. / core/@angular/core.es5.js.NgModuleRef_.get （core.es5.js：10557） at resolveDep（core.es5.js：11060）在createClass（core.es5.js：10913） at injectionError（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）在ReflectiveInjector .webpackJsonp ... / .. / .. / core/@angular/core.es5.js.ReflectiveInjector_.get （core.es5.js：2489） at resolveNgModuleDep（core.es5.js：9475）在NgModuleRef_.webpackJsonp ... / .. / .. / core/@angular/core.es5.js.NgModuleRef_.get （core.es5.js：10557） at resolveDep（core.es5.js：11060）在createClass（core.es5.js：10913） at resolvePromise（polyfills.bundle.js：3328） at resolvePromise（polyfills.bundle.js：3299）在polyfills.bundle.js：3376 在ZoneDelegate.webpackJsonp ... / .. / .. / .. / zone.js / dist / zone.js.ZoneDelegate.invokeTask （polyfills.bundle.js：2969） at Object.onInvokeTask（core.es5.js：3881）在ZoneDelegate.webpackJsonp ... / .. / .. / .. / zone.js / dist / zone.js.ZoneDelegate.invokeTask （polyfills.bundle.js：2968）在Zone.webpackJsonp ... / .. / .. / .. / zone.js / dist / zone.js.Zone.runTask（polyfills.bundle.js：2736）在drainMicroTaskQueue（polyfills.bundle.js：3140）在

Answer 1

问题实际上是在＆＃34; Code＆amp;实施例＆＃34;标题the alerts documentation on the Clarity website。

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

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：使用.static类名让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']
...
})

Answer 3

确保您已在app.module.ts内提供 AlertIconAndTypesService

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

然后，

@NgModule({
 providers: [
       AlertIconAndTypesService
    ]
})

Answer 4

导入app.module.ts文件：

从“ ngx-device-detector”导入{DeviceDetectorService};

并添加提供程序数组

提供者：[ DeviceDetectorService ]

收到错误“没有AlertIconAndTypesService的提供者！”

4 个答案: