Question

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

我想通过双向设置每个页面的标题。

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

我认为任何一件事都可以从以上两个选项中完成。不同的人对选项1（Deblaton）和选项2（Manuel）有两个答案。两个答案都满足各自的情景。我接受了第一个正确回答的人。

更新：如果您看到文件＆＃34; 1.html＆＃34;在plunker上。我正在尝试设置<my-title> First page</my-title>。但那不起作用。我的主要想法是，开发人员会给出部分<my-title>Current Page Title</my-title>，并且当他浏览时会按当前页面显示。

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

这里有很多代码可以复制粘贴。请访问此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

您的代码中缺少一些内容。

您需要使用绑定才能将参数传递给组件
您使用的是＆＃34; model＆＃34;在模板中引用模型，但这不是默认模式。在这里你可以做两件事，你可以在模板中使用$ ctrl或在组件中定义controllerAs。

组件示例：

> x
 [1] 1 2 3 4 5 5 4 3 2 1
> y
 [1] 1 2 3 3 2 1 1 2 3 4 5

使用示例：

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

请注意＆＃34;＆＃39;我是First＆＃39;＆＃34;中双引号内的引号。你需要两个，因为你传递一个字符串作为参数。

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

你的Plunker带有变化：https://plnkr.co/edit/ScpJYQItsMQlyd1Eacyi?p=preview

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

2 个答案: