如何使用Angular 1.5中的组件为每个页面设置标题 [英] how to set header for each page using component in Angular 1.5

问题描述

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

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

1. 通过部分< my-title> Home< / my-title> 提供（参见1.html或2.html） ）
   （Manuel的回答满足这个场景）


2. 我也想从控制器设置它。 vm.title =当前页面标题（接受的答案仅满足此情景）

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

更新：如果你在plunker上看到文件1.html。我正在尝试设置< my-title>第一页< / my-title> 。但这不起作用。我的主要想法是，开发人员会在部分内部提供< my-title>当前页面标题< / my-title> ，并且当他导航时将按当前页面显示跨越。

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

这里有很多代码可以复制粘贴。请访问此

解决方案

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

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

所以，组件：

  module.component（'firstComponent'，{
 templateUrl：1.html，
 controller：[$ rootScope，function（$ rootScope）{
 $ rootScope.appVars = $ rootScope.appVars || {}; 
 $ rootScope.appVars.title =第1页的标题; 
}] 
}）; 
  

和指令：

  module.component（'myTitle'，{
 template：'< h1> {{$ root.appVars.title}}< / h1>'
}）; 
  

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

I started with Angular 1.5 component recently. I am having various pages in my application. So I decided to create a <my-title> component which am using inside <my-header> component. As you see in navbar I have First, Second as navigation links. In my application there will be more parent child combinations.

I want to set title of each page by two way.

1. By giving it in partial <my-title>Home</my-title> (see 1.html or 2.html) (Manuel's answer satisfies this Scenario)
2. Also I would like to set it from controller as well. vm.title = "current page title" (Accepted Answer Satisfies This Scenario Only)

I think any one thing can be done from above two options. There are two answers by different person for option 1(Deblaton) and option 2(Manuel). Both answers satisfies respective scenarios. I accepted who answered first correctly.

Updated: If you see file "1.html" on plunker. I am trying to set <my-title> First page</my-title>. but that is not working. My key idea is that developer will give <my-title>Current Page Title</my-title> on partial and it will be shown as per current page when he navigates across.

Please keep in mind I will be exposing only <my-title> to partial and controller. <my-header> will be at one place only. Only Title will be changed. If there are some new pages navigation links will be added to <my-header>.

There is lot of code to copy-paste here. Please visit this 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"
 });

解决方案

To me, using component routing, it looks like a good idea to use a controller for handling your title. (with ui-router, I would have used the resolve option).

I decided to inject $rootScope, and use it for sharing title value. You can also do it with a service.

so, the component :

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

and the directive :

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

Here is your updated plnkr : https://plnkr.co/edit/6PCfznxsJzCPQtBm2oyN?p=preview

这篇关于如何使用Angular 1.5中的组件为每个页面设置标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！