Question

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

Answer 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。

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

Answer 2

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

Answer 3

你可以使用类似的东西

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

然后在你的控制器内

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

AngularDart动态更改页面标题

3 个答案: