无法绑定内联SVG。

Question

我正在尝试通过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' 的已知属性。

- user2029393

Answer 1

由于Ionic中使用了“懒加载”，因此您需要在每个使用它的页面的*.module.ts文件中添加InlineSVGModule的导入。

- Matthias

---

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

Answer 2

我也遇到过同样的问题，即在 angular-cli 应用程序中将导入放置在 app.module 中可以工作，但是在由 webpack 构建的 angular 应用程序中不起作用。

我通过将导入放置在引用要使用 ng-inline-svg 的模板的组件中解决了这个问题。

- Nicholas Murray

Answer 3

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

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

- Tung Nguyen