4

我正在使用清晰度模块和我的 Angular 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>

错误堆栈详细信息

ERROR 错误：未捕获（承诺）：错误：没有 AlertIconAndTypesService 的提供者！错误：没有 AlertIconAndTypesService 的提供者！在 ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_ 处的 injectionError (core.es5.js:1169) 处的 noProviderError (core.es5.js:1207)。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_。ReflectiveInjector 的 getByKey (core.es5.js:2620).webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489) 在 resolveNgModuleDep (core.es5.js:9475) 在 NgModuleRef_.webpackJsonp .../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10557) 在 resolveDep (core.es5.js:11060) 在 createClass (core.es5 .js:10913) in injectionError (core.es5.js:1169) at noProviderError (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_。ReflectiveInjector 的 getByKey (core.es5.js:2620).webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489) 在 resolveNgModuleDep (core.es5.js:9475) 在 NgModuleRef_.webpackJsonp .../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10557) 在 resolveDep (core.es5.js:11060) 在 createClass (core.es5 .js:10913) 在 resolvePromise (polyfills.bundle.js:3328) 在 resolvePromise (polyfills.bundle.js:3299) 在 polyfills.bundle.js:3376 在 ZoneDelegate.webpackJsonp.../../../。 ./zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2969) 在 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) 在

4

4 回答 4

6

该问题实际上在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：使用.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>
于 2017-09-03T15:07:14.533 回答
1

正如错误所暗示的那样，AlertIconAndTypesService在您的模块中导入服务

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

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

....
@NgModule({
...
providers:['AlertIconAndTypesService']
...
})
于 2017-09-02T06:02:53.023 回答
1

确保您已AlertIconAndTypesService在 app.module.ts 中的提供下添加

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

进而，

@NgModule({
 providers: [
       AlertIconAndTypesService
    ]
})
于 2017-09-02T06:03:06.070 回答
0

在 app.module.ts 文件中导入：

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

并添加提供者数组

提供者：[ DeviceDetectorService ]

于 2020-09-14T07:55:41.160 回答