在 Angular Dart 中更改 HTML 的 <head> 中的值答案

【问题标题】：Change values in <head> of HTML in Angular Dart在 Angular Dart 中更改 HTML 的 <head> 中的值
【发布时间】：2018-10-23 11:42:36
【问题描述】：

所以我是相对较新的 Angular Dart 和 Dart，我正在尝试创建一个简单的 webapp。

当我过去进行 PHP 开发时，我总是有一个配置文件来确定应用程序运行的环境，并决定以不同的方式自行设置。

我试图弄清楚如何在 Angular Dart 中实现类似的功能。特别是作为开始的示例，我想根据正在加载应用程序的 URL 设置不同的基本 href。当您阅读文档时，它说在开发过程中您应该像这样设置基本 href：

<script>
  // WARNING: DO NOT set the <base href> like this in production!
  // Details: https://webdev.dartlang.org/angular/guide/router
  (function () {
    var m = document.location.pathname.match(/^(\/[-\w]+)+\/web($|\/)/);
    document.write('<base href="' + (m ? m[0] : '/') + '" />');
  }());
</script>

但是为了分发它应该这样设置：

<base href="/">

所有这些都需要位于 HTML 页面的 <head> 部分，所以我想在这里做一些 if 语句。示例我将如何在 PHP 中做到这一点：

<head>
   <?php if(DEV) { ?>
      // Do the development base href
   <?php } else if(PROD) { ?>
      // Do the production base href
   <?php }?>
</head>

所以我的问题基本上是，目前在 Angular Dart 中是否有可能？

【问题讨论】：

标签： dart angular-dart

【解决方案1】：

您不能在 <head> 中使用 Angular 进行绑定。
我认为仍有一种方法可以使用 -D=PROD=... 将“环境”变量传递给应用程序
然后你可以使用const isProd = bool.fromEnvironment('PROD')（另见https://github.com/dart-lang/site-www/issues/404）
然后使用dart:html 来操作DOM。

我已经有一段时间没有在 web 中使用它了，我不确定 Dart 2 是否仍然支持它。

（发现更新https://github.com/dart-lang/build/issues/1053）

如果'<base href="...">仅用于Angular路由，那么最好使用

import 'package:angular_router/angular_router.dart';

添加

ValueProvider<String>.forToken(appBaseHref, '/'),

发给 Angular 提供者。

我还使用了一个复制文件的构建脚本，例如

cp web/run_config_prod.dart web/run_config.dart
webdev build ...
cp web/run_config_dev/run_config.dart

根据目标环境更改某些设置。

【讨论】：

非常感谢您的回答！虽然我了解自定义脚本的方法，但我肯定也需要为我的发行版编写一些脚本。但我想我仍然对如何更改 HTML 头部部分中的一些内容感到好奇。我在某处读过我可以有多个 index.html 和 main.dart 文件。你可以指导我看一个教程，我将如何实现这一目标？
import 'dart:html'; ... document.head.querySelector(...).remove() 或 .children.add() ... 你也可以用 Dart 做任何 JavaScript 允许的事情。
是的，我知道这一点。但是您无法根据飞镖文档操作部分中的内容。所以如果可能的话，我愿意维护我的 index.html 和 main.dart 的多个版本吗？
为什么你认为你无法操纵<head>？一个问题可能是它需要在执行 Dart 代码之前进行更新以满足搜索引擎或类似的需求。在这种情况下，最好使用多个 index.html 文件。
我很抱歉，我的错误。我能够使用 {{title}} 占位符修改页面标题，然后将其绑定到 const 值。但是却无法实现“if”语句。您能否以正确的方式指导我使用多个 index.html 文件？