routerLink вне шаблона компонента в Angular 2, в базовом html

Когда я использую директивы routerLink внутри своего template объектов, он работает.routerLink вне шаблона компонента в Angular 2, в базовом html

Но мы говорим о верхней части меню всех моих сайтов. Но когда я отделяю его от основного файла шаблона (layout.html), он больше не функционирует.

Да, конечно, огромная нуба для ng2, но я хочу, чтобы мое меню оставалось вне файла javascript и внутри основного макета html. Как это можно сделать?

<body> 
    <base href="/" /> 
    <div class="row menu"> 
     <div class="container"> 
      <ul class="u-pull-left"> 
       <li><a [routerLink]="['/']" routerLinkActive="active">Home</a></li> 
       <li>Notifications</li> 
       <li>My Hisses</li> 
      </ul> 
      <ul class="u-pull-right"> 
       <li><a [routerLink]="['/register']" routerLinkActive="">Register</a></li> 
       <li><a [routerLink]="['/login']" routerLinkActive="active">Login</a></li> 
      </ul> 
     </div> 
    </div> 

    <root></root> 
<!-- End Document 
    –––––––––––––––––––––––––––––––––––––––––––––––––– --> 
</body>

Какой важный шаг я пропустил? Возможно ли это?

Спасибо!

источник

2016-09-28 RedactedProfile

routerLink является директивой и [routerLink]="..." является обязательным для ввода директивы. Ни один из них не должен работать вне компонента Angular2.

Вы можете использовать общую службу, которая инстанцированная вне Angular2 и передается в качестве поставщика

let service = new MyService(); 

@NgModule({ 
    providers: [{provide: MyService: useValue: service}], 
    ... 
}) 
class AppModule {}

, то вы можете использовать service общаться с какой-либо компонентой или службой Angular2 делегировать вызов router.navigate(...) делать делать повелительно какой routerLink сделал бы.

Другой способ стрельбы (window.dispatchEvent(...)) и прослушивание этих событий внутри Angular2.

Если возможно, я бы полностью избегал такой установки (имеющей разъемы маршрутизатора вне компонентов Angular2).

источник

2016-09-28 06:47:00

Привет благодарю вас за ответ. поэтому, если я не очень заинтересован в том, чтобы все мое главное меню было частью другого компонента ng2, должен ли я просто позволить ему быть статичным и позволить ему обновлять страницу? Я просто пытаюсь придумать подход здесь, чтобы идти вперед с – RedactedProfile

. Я думаю, что это просто не стоит хлопот. Я бы пересмотрел использование Angular2, если мне понадобится такая настройка. На мой взгляд, обновление страницы также довольно плохое. Вы можете попробовать, используя API [history API] (https://developer.mozilla.org/en-US/docs/Web/API/History_API) из JS, делает маршрутизатор в приложении Angular2 обновленным представлением. Возможно, что-то вроде http://stackoverflow.com/questions/39686305/changing-shared-data-between-root-modules (или http://stackoverflow.com/questions/36566698/cant-initialize-dynamically-appended-html- компонент-в-угловой-2 - не обновляется) может работать для вас. –

Итак, что вы мне говорите, это то, что если я хочу использовать ng2, я должен передать свою структуру страницы ENTIRE в одно из полей шаблона огромного компонента, а через маршрутизатор-розетка может выплеснуть дочерний компонент, иначе нет смысла использовать его? Я никогда в жизни не видел, как верхняя панель меню «загружалась» с остальной частью JS: p Мне просто нужен материал под панелью меню, а над нижним колонтитулом - для отображения динамического содержимого. Похоже на значительное странное ограничение, учитывая, что ng1 позволяет вам переключаться на страницы ngRouter с помощью директив, где бы вы ни хотели. – RedactedProfile

Вы не можете этого сделать, потому что routerLink является специальным синтаксисом angular2, который преобразуется в js, а ваш HTML-шаблон является загрузочным экземпляром приложения и не пересылается.

Обычно, чтобы создать статическую верхнюю панель, вы должны создать новый компонент верхней панели и использовать его как директиву в своем родительском приложении выше, где вы вызываете розетку маршрутизатора.

Пример. В вашем app.component. вы бы импортировать ваш компонент

Импорт {TopNav} от '' topnav.component

@Component ({селектора: 'мое-приложение', шаблон: директивы: [TopNav]})

Вашего компонент topnav будет содержать вашу логику маршрутизации

источник

2016-09-28 06:55:53

routerLink вне шаблона компонента в Angular 2, в базовом html

ответ

Смежные вопросы