如何通过组件在AngularDart应用中显示HTML代码段？

Question

我正在尝试通过angularDart应用中的IMDB插件HTML代码段显示IMDB评级，但无法通过组件显示它。它仅显示徽标，不渲染显示等级的脚本。

app_component.html

<div class="material-content">
    <header class="material-header shadow">
        <div class="material-header-row">

            <span class="material-header-title">SIMPLE TITLE</span>
            <div class="material-spacer"></div>
            <div class="header-navigation">
                <nav class="material-navigation">
                    <a>Link 1</a>
                </nav>
                <nav class="material-navigation">
                    <a>Link 2</a>
                </nav>
                <nav class="material-navigation">
                    <a>Link 3</a>
                </nav>
            </div>
        </div>
    </header>
    <div>
        Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
        et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
        veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
        legere iriure blandit. Veri iisque accusamus an pri.
    </div>

    <span class="imdbRatingPlugin" data-user="ur69296978" data-title="tt7215444" data-style="p1"><a href="https://www.imdb.com/title/tt7215444/?ref_=plg_rt_1"><img src="https://ia.media-imdb.com/images/G/01/imdb/plugins/rating/images/imdb_46x22.png" alt=" The Final Year
(2017) on IMDb" />
</a></span><script>(function(d,s,id){var js,stags=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.src="https://ia.media-imdb.com/images/G/01/imdb/plugins/rating/js/rating.js";stags.parentNode.insertBefore(js,stags);})(document,"script","imdb-rating-api");</script>

    <div class="controls">
        <h3>Options</h3>
        <material-toggle [(checked)]="end" label="end">
        </material-toggle>
        <material-toggle [(checked)]="customWidth" label="custom width">
        </material-toggle>
    </div>
</div>

app_component.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'my-app',
  directives: const [
    materialDirectives,
    DeferredContentDirective,
    MaterialButtonComponent,
    MaterialIconComponent,
    MaterialPersistentDrawerDirective,
    MaterialToggleComponent,
    MaterialListComponent,
    MaterialListItemComponent,
  ],
  templateUrl: 'app_component.html',
  styleUrls: const [
    'app_component.css',
    'package:angular_components/app_layout/layout.scss.css',
  ],
)
class ApprComponent {
  bool customWidth = false;
  bool end = false;
}

Answer 1

您无法向Angular组件模板添加<script>标签。
Angular只会删除它。

您可以强制性地添加脚本标签。

代码看起来与TS示例Adding script tags in Angular2 component template

非常相似

Answer 2

内部应用程序组件

  

您可以在角度组件内部执行外部脚本，如下所示：

 ngOnInit() {
            const _script = '<script>(function(d,s,id){var js,stags=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.src="https://ia.media-imdb.com/images/G/01/imdb/plugins/rating/js/rating.js";stags.parentNode.insertBefore(js,stags);})(document,"script","imdb-rating-api")';

            const fun = new Function(script);
    }

  

它将执行您的外部脚本。

Answer 3

出于安全原因，角度禁止这种用法。

但是您可以尝试使用dart_browser_loader软件包。

ngAfterViewInit() async {
  await loadScript(
    'https://ia.media-imdb.com/images/G/01/imdb/plugins/rating/js/rating.js',
    id: 'imdb-rating-api',
  );
}

它将在HTML页面的顶部加载所需的脚本