как установить заголовок для каждой страницы с помощью компонента в Angular 1.5

Недавно я начал с компонента Angular 1.5. У меня есть разные страницы в моем приложении. Поэтому я решил создать компонент <my-title>, который я использую внутри компонента <my-header>. Как вы видите, в навигационной панели у меня есть First, Second в качестве навигационных ссылок. В моем приложении будет больше родительских дочерних комбинаций.

Я хочу установить заголовок каждой страницы двумя способами.

  1. Предоставив его частично <my-title>Home</my-title> (см. 1.html или 2.html) (ответ Мануэля удовлетворяет этому сценарию)
  2. Также я хотел бы установить его с контроллера. vm.title = "current page title" (Принятый ответ удовлетворяет только этому сценарию)

Я думаю, что из двух вышеперечисленных вариантов можно сделать что-то одно. Есть два ответа от разных людей для варианта 1 (Деблатон) и варианта 2 (Мануэль). Оба ответа удовлетворяют соответствующим сценариям. Я согласен с тем, кто первым ответил правильно.

Обновлено: если вы видите файл «1.html» в 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"
 });

введите здесь описание изображения


javascript html jquery angularjs angularjs-components
person ankitd    schedule 31.08.2016    source источник
comment
хотите установить заголовок либо из частичного, либо из контроллера.   -  person ankitd    schedule 31.08.2016
comment
Если вы видите файл 1.html на plunker. Я пытаюсь установить ‹my-title›Первая страница‹/my-title›. но это не работает. Моя ключевая идея заключается в том, что разработчик укажет ‹my-title›Текущий заголовок страницы‹/my-title› на частичном, и он будет показан.   -  person ankitd    schedule 31.08.2016
comment
хорошо. Обновлено :) Хотя я уже упоминал, что пытаюсь раскрыть «my-title» двумя способами.   -  person ankitd    schedule 31.08.2016
comment
Я не вижу, чтобы можно было определить контроллер и ссылаться на него для ваших компонентов. Пожалуйста, обновите код, чтобы включить это тоже.   -  person Diana R    schedule 31.08.2016
comment
@diana не поняла тебя, можешь уточнить   -  person ankitd    schedule 31.08.2016
comment
Что ж, на любой странице angularjs есть приложение (модуль), затем он должен иметь контроллер, а затем каждый компонент должен иметь свой собственный контроллер — это место, где у вас есть бизнес-логика, связанная с каждым компонентом/директивой.   -  person Diana R    schedule 31.08.2016
comment
@diana сделала это, можешь посмотреть и ответить.   -  person ankitd    schedule 31.08.2016

Ответы (2)


arrow_upward
1
arrow_downward

Для меня, используя компонентную маршрутизацию, кажется хорошей идеей использовать контроллер для обработки вашего заголовка. (с ui-router я бы использовал опцию разрешения).

Я решил внедрить $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

person Deblaton Jean-Philippe    schedule 31.08.2016
comment
Он работает как чемпион. Возможность установить заголовок с контроллера. Простой запрос, почему это {{$root.title}} в шаблоне. Просто интересно узнать, что происходит за кулисами. Любая идея, как заставить ‹my-title› I am Page one ‹my-title› работать, завершит ответ. :) - person ankitd; 01.09.2016
comment
@ankitdadhich С контроллером В качестве синтаксиса все, что находится внутри $rootScope, доступно во всех шаблонах, использующих $root. - person Deblaton Jean-Philippe; 01.09.2016
comment
@ankitdadhich Я не вижу, чего не хватает в вашей директиве myTitle - person Deblaton Jean-Philippe; 01.09.2016

arrow_upward
1
arrow_downward

Вам не хватает нескольких вещей в вашем коде.

  1. Вам нужно использовать привязки для передачи параметров компонентам
  2. Вы используете слово «модель» в своих шаблонах для обозначения модели, но оно не используется по умолчанию для этого. Здесь вы можете сделать 2 вещи, вы можете использовать $ctrl в шаблонах или определить контроллер как в компоненте.

Пример компонента:

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

Используйте пример:

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

Обратите внимание на кавычки внутри двойных кавычек в слове «Я первый». Вам нужны оба, потому что вы передаете строку в качестве параметра.

Чтобы изменить заголовок в заголовке, я создал службу, позволяющую обмениваться данными с компонентами под ng-outlet и внешними компонентами, потому что вы не можете передавать данные в виде привязок через маршруты.

Ваш плункер с изменениями: https://plnkr.co/edit/ScpJYQItsMQlyd1Eacyi?p=preview

person Manuel Ferreiro    schedule 31.08.2016
comment
Спасибо @gyc, я обновил его плункер и отредактировал ответ со ссылкой. - person Manuel Ferreiro; 01.09.2016
comment
но вы видите, что это не делает то, что он хочет. Заголовок не меняется. - person gyc; 01.09.2016
comment
Я выполнил Plunker, чтобы изменить заголовок в заголовке при навигации - person Manuel Ferreiro; 01.09.2016