如何通过组件在 AngularDart 应用程序中显示 HTML 片段？答案

【问题标题】：How to display HTML snippet in an AngularDart app through components?如何通过组件在 AngularDart 应用程序中显示 HTML 片段？
【发布时间】：2019-01-08 17:04:10
【问题描述】：

我正在尝试在 angularDart 应用程序中通过 IMDB 插件 HTML sn-p 显示 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;
}

【问题讨论】：

标签： dart angular-dart dart-html

【解决方案1】：

您不能将 <script> 标签添加到 Angular 组件模板中。
Angular 只会放弃它。

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

代码看起来与这个 TS 示例 Adding script tags in Angular2 component template 非常相似

【讨论】：

【解决方案2】：

内部应用组件

您可以像这样在 Angular 组件中执行外部脚本：

 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);
    }

它将执行您的外部脚本。

【讨论】：

欢迎来到 Stack Overflow！请不要只用源代码回答。尝试对您的解决方案如何工作提供一个很好的描述。请参阅：How do I write a good answer?。谢谢

【解决方案3】：

出于安全原因，Angular 不允许这种用法。

不过你可以试试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 页面的头部加载你想要的脚本

【讨论】：