无法绑定到 inlineSVG答案

【问题标题】：Can't bind to inlineSVG无法绑定到 inlineSVG
【发布时间】：2018-06-10 20:10:21
【问题描述】：

我正在尝试通过 ng-inline-svg 包在 ionic 3.3.0/Angular 4.1.2 中使用内联 SVG。

import { HttpModule } from '@angular/http';
import { InlineSVGModule } from 'ng-inline-svg';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpModule, InlineSVGModule],
  bootstrap: [AppComponent]
})
class AppModule {}

模板

<div class="icon icon-shop" aria-label="My icon" [inlineSVG]="'../../assets/symbol-defs.svg#icon-shop'"></div>

我得到了错误

无法绑定到“inlineSVG”，因为它不是“div”的已知属性。

【问题讨论】：

标签： angular svg ionic3

【解决方案1】：

由于 Ionic 中的延迟加载，您需要在您曾经使用过的每个 Pages *.module.ts 文件中添加 InlineSVGModule 的导入。

【讨论】：

今天这个回复帮了我很多忙。谢谢！

【解决方案2】：

我也遇到了同样的问题，将 app.module 中的导入在 angular-cli 应用程序中工作，但当 webpack 在 Angular 应用程序中构建时却没有。

我通过将导入放在引用您打算使用 ng-inline-svg 的模板的组件中来解决它。

【讨论】：

【解决方案3】：

我不知道您使用 [inlineSVG] 的模板在哪里，但您应该将组件包含在 AppModule 的声明部分中。例如，您的模板代码在 ShopComponent 中：

@NgModule({
  declarations: [AppComponent, ShopComponent],
  imports: [BrowserModule, HttpModule, InlineSVGModule],
  bootstrap: [AppComponent]
})

【讨论】：