Расширение шаблона Angular 5

Я пытался реализовать решение для этого некоторое время, и я еще не пришел к чистому.

Помогите мне, пожалуйста.

У меня есть 2 маршрута:

  1. /авторизоваться
  2. /регистр

У них очень похожие шаблоны:

логин.html

<div class="main-container">
  <section class="fullwidth-split">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          [...more similar html to both views...]
          <h2>Login</h2>
        </div>
        <!--end of col-->
        <div class="col-12">
            Login form HTML
        </div>
      </div>
    </div>
  </section>
</div>

register.html

<div class="main-container">
  <section class="fullwidth-split">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          [...more similar html to both views...]
          <h2>Registration</h2>
        </div>
        <!--end of col-->
        <div class="col-12">
            Registration form HTML
        </div>
      </div>
    </div>
  </section>
</div>

Как видите, большая часть HTML-кода одинакова, включая раздел и контейнер div. Я хотел бы повторно использовать этот шаблон, и я пытался использовать дочерние маршруты и использовать динамическую часть HTML, но, как вы можете видеть, h2 также меняет свое содержимое, поэтому, если я не продублирую этот шаблон, это невозможно. Лучшее, что у меня есть, это использовать router-outlet, но тогда у меня есть СТАТИЧЕСКИЙ заголовок h2, и я не могу изменить его в дочернем компоненте, потому что он находится в шаблоне родительского компонента.

Какие-либо предложения?


javascript angular angular-routing angular-template
person Gabriel Veloso    schedule 06.04.2018    source источник
comment
Если ваши дочерние шаблоны имеют свои собственные контроллеры, вы можете установить значение в родительской области с помощью scope.page="", затем, когда вы перейдете к разделу входа, обновите значение страницы из контроллера входа с помощью $scope.$parent.page = "Login"; и сделайте то же самое в контроллере для регистрации и используйте <h2>{{page}}</h2> в вашем родительском шаблоне.   -  person kimobrian254    schedule 06.04.2018
comment
Пожалуйста, никогда не отмечайте вопрос с помощью angular и angularjs. Посмотрите на комментарий выше, это неприменимо, но ваш тег смутил пользователя, и он зря потратил свое время.   -  person Aluan Haddad    schedule 06.04.2018
comment
@AluanHaddad Извините, вы можете мне помочь?   -  person Gabriel Veloso    schedule 06.04.2018
comment
@GabrielVeloso нет проблем, просто дам знать на будущее. Извините, я не знаю, в чем здесь дело, я просто мимоходом исправил теги. Удачи.   -  person Aluan Haddad    schedule 06.04.2018
comment
Вам, вероятно, нужно добавить конфигурацию маршрутизатора к вопросу, чтобы кто-нибудь мог вам помочь.   -  person Aluan Haddad    schedule 06.04.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вот одно из возможных решений. Создайте компонент (my-component), который использует общий HTML-код, и добавьте к нему проекцию контента. HTML-код должен выглядеть примерно так:

<div class="main-container">
  <ng-content></ng-content>
</div>

Вы проецируете различный контент следующим образом:

регистр.html:

<my-component>
  <h2> Registration </h2>
</my-component>

логин.html:

<my-component>
  <h2> Login </h2>
</my-component>

У вас также может быть несколько проекций контента. Это делается путем добавления атрибута select к ng-content в my-component:

<div class="main-container">
  <ng-content select=".heading-content"></ng-content>
  <ng-content select=".form-content"></ng-content>
</div>

И используйте так:

<my-component>
  <h2 class="heading-content"> Login </h2>
  <div class="form-content">
    .....
  </div>
</my-component>
person Simon Kazakov    schedule 06.04.2018