Question

我一直试图为此实施一个解决方案，但我还没有找到一个干净的解决方案。

请帮助我。

我有两条路线：

/登录
/注册

他们有非常相似的模板：

的login.html

＆＃13;

<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>

＆＃13;

register.html

＆＃13;

<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>

＆＃13;

如您所见，大多数HTML都是相同的，包括section和container div。我想重用这个模板，我尝试使用子路由并在动态HTML部分上使用，但是你可以看到h2也改变了它的内容，所以除非我复制这个模板，否则它是不可能的。我得到的最好的是使用路由器插座，但后来我有一个STATIC标题h2并且无法在子组件上更改它，因为它在父组件模板上。

有什么建议吗？

Answer 1

这是一种可能的解决方案。创建一个使用共享html并向其添加内容投影的组件（my-component）。 html看起来应该是这样的：

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

您投影的内容如下：

register.html：

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

的login.html：

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

您还可以有多个内容预测。这是通过向my-component中的ng-content添加select属性来完成的：

<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>

角度5模板扩展

1 个答案: