如何使用 Angular 1.5 中的组件为每个页面设置 header

Question

我最近开始使用 Angular 1.5 组件。我的应用程序中有多个页面。所以我决定创建一个 <my-title> 组件，它在 <my-header> 组件内部使用。正如您在导航栏中看到的，我有 First、Second 作为导航链接。在我的申请中会有更多parentchild组合。

我想通过两种方式设置每个页面的标题。

部分 <my-title>Home</my-title>（参见 1.html 或 2.html）（Manuel 的回答满足这个场景）
我也想从控制器设置它。 vm.title = "current page title"（接受的答案仅满足此场景）

我认为任何一件事都可以通过以上两个选项来完成。对于选项 1（Deblaton）和选项 2（Manuel），不同的人有两个答案。两个答案都满足各自的场景。谁先答对我接受了

更新：如果您在 plunker 上看到文件“1.html”。我正在尝试设置 <my-title> First page</my-title>。但这是行不通的。我的主要想法是开发人员将在部分上给出 <my-title>Current Page Title</my-title>，并且在他导航时将按照当前页面显示。

请记住，我只会 <my-title> 向部分和控制器公开。 <my-header> 只会在一个地方。只会更改标题。如果有一些新的页面导航链接将被添加到<my-header>。

copy-paste 这里有很多代码。请访问此 PLUNKER.

module.component('myFirstApp', {
   templateUrl: "mainview.html",
   $routeConfig: [
     {path: '/', redirectTo: ['/First'] },
     {path: '/first', name: 'First', component: 'firstComponent'},
     {path: '/second', name: 'Second', component: 'secondComponent'}
   ]
 })

 module.component('firstComponent', {
   templateUrl: "1.html"
 });

 module.component('secondComponent', {
   templateUrl: "2.html"
 });

 module.component('myTitle', {
   template: '<h1>{{model.title}}</h1>'
 });

 module.component('myHeader', {
   templateUrl: "my-header.html"
 });

Answer 1

对我来说，使用组件路由，使用控制器来处理标题似乎是个好主意。（使用 ui-router，我会使用 resolve 选项）。

我决定注入 $rootScope，并用它来共享标题值。您也可以使用服务来完成。

所以，组件 :

module.component('firstComponent', {
  templateUrl: "1.html",
  controller: ["$rootScope", function($rootScope){
    $rootScope.appVars = $rootScope.appVars || {};
    $rootScope.appVars.title = "Title from Page 1";
  }]
});

和指令：

module.component('myTitle', {
  template: '<h1>{{$root.appVars.title}}</h1>'
});

这是您更新后的 plnkr：https://plnkr.co/edit/6PCfznxsJzCPQtBm2oyN?p=preview

Answer 2

您的代码中缺少一些东西。

您需要使用绑定才能将参数传递给组件
您在模板中使用 "model" 一词来指代模型，但这并不是默认的做法。在这里你可以做两件事，你可以在模板中使用 $ctrl 或在组件中定义 controllerAs。

组件示例：

module.component('myTitle', {
  template: '<h1>{{model.title}}</h1>',
  controllerAs: 'model',
  bindings: {
    title: '<'
  }
});

使用示例：

<my-title title="'I am First'"></my-title>

注意“'I am First'”中双引号内的引号。您需要两者，因为您将字符串作为参数传递。

为了更改 header 中的标题，我创建了一个服务以允许 ng-outlet 下的组件和外部组件进行通信，因为您可以不通过路由将数据作为绑定传递。

您的 Plunker 发生了变化：https://plnkr.co/edit/ScpJYQItsMQlyd1Eacyi?p=preview

如何使用 Angular 1.5 中的组件为每个页面设置 header

how to set header for each page using component in Angular 1.5

html

javascript

jquery

angularjs

angularjs-components