AngularDart 动态改变页面标题答案

【问题标题】：AngularDart dynamically change the page titleAngularDart 动态改变页面标题
【发布时间】：2014-08-22 04:50:01
【问题描述】：

我的一个组件根据路由从 MongoDB 中提取页面标题（和内容），并将标题存储在该组件类的实例变量中。在<title> 标记中给一些小胡子一个要显示的变量（例如<title>Site Title | {{pageName}}</title>）的最佳方法是什么？ <title> 标签超出了组件的范围。也许控制器适合这个用例，但我不确定控制器指令或根对象的状态是什么。我考虑过提供服务并将其注入两者，但这似乎有点矫枉过正。有一个更好的方法吗？谢谢！

【问题讨论】：

标签： dart angular-dart

【解决方案1】：

我最终制作了一个新组件和一项服务。

我的简化版index.html（几乎没有变化）：

<html ng-app>
    <title>Site Title</title>
</head>
<body></body>

存储一个变量的服务：

import 'package:angular/angular.dart';

@Injectable()
class Global {
  String pageTitle;

  Global();
}

以及带有标题选择器的组件：

library title;

import 'package:angular/angular.dart';
import 'package:mypackage/service/global.dart';

@Component(
    selector: 'title',
    template: 'Site Title | {{titleComp.global.pageTitle}}',
    publishAs: 'titleComp',
    useShadowDom: false)
class TitleComponent {
  final Global global;

  TitleComponent(this.global);
}

然后我将 Global 注入到另一个组件中，并在每次加载新页面时修改 global.pageTitle。

我很想听听对此的任何改进或使用根控制器或根范围的方法。

【讨论】：

是的。我只是从未使用过控制器，也不确定何时应该使用它们......
据我所知（暂时没有使用 Angular）控制器即将消失 - 最后应该只存在一个控制器 - rootContent。我不知道当前发布的版本是否已经支持这个。控制器类似于没有模板的组件。 rootContext 将允许您在组件外部使用类似 {{titleComp.global.pageTitle}} 的绑定（例如直接在 body 中）。
我认为控制器的一些问题是上下文里程碑。所以我想等到有更多的进展后再尝试使用它们？

【解决方案2】：

我相当肯定这是不可能的——我不认为 angular 能够在 body 标记之外进行任何插值。最好的办法是使用Document.title() 方法。

【讨论】：

这应该不是问题。您可以将ng-app 属性放在<html ng-app> 上。标头中的某些标签/属性没有意义，因为 {{}} 仅在 Angular 初始化后评估和分配，但我不知道当 {{}} 不在时他如何进行绑定保存值的组件的范围。他可以创建一个保存标题值的服务，并在根控制器中提供对该服务的访问。在组件中，他可以访问服务来更改值。
你将如何使用根控制器？如果这被记录在某处，那么指向它的链接就足够了。我也知道它正在发生很大变化，所以我不确定什么是当前有效的文档。

【解决方案3】：

你可以使用类似的东西

<title ng-bind="header"></title>

然后在你的控制器中

testController = function($scope, $rootScope) {
   $scope.someFunction = function() {
      $rootScope.header = "Test";
   }
}

【讨论】：