角5模板扩展

Question

我已经尝试了一段时间来实现这一解决方案，但我还没有找到一个干净的解决方案。

求你帮帮我。

我有两条路线：

1. /login
2. /register

它们有非常相似的模板：

login.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也会更改其内容，所以除非我复制这个模板，否则是不可能的。最好的方法是使用路由器插座，但是我有一个静态标题h2，不能在子组件上更改它，因为它位于父组件模板上。

有什么建议吗？

Answer 1

这里有一个可能的解决办法。创建一个使用共享html并向其添加内容投影的组件()。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>

您还可以有多个内容投影。这是通过向“我的-组件”中的ng-内容添加一个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>