Angular 5 模板扩展

Question

一段时间以来，我一直在尝试为此实施解决方案，但我还没有找到一个干净的解决方案。

请帮帮我

我有 2 条路线：

/登录
/注册

他们有非常相似的模板：

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。我想重复使用这个模板，我已经尝试使用 child 路由并在动态 HTML 部分上使用，但是正如你所看到的，h2 也改变了它的内容，所以除非我复制这个模板它是不可能。我得到的最好的是使用 router-outlet，但是我有一个静态标题 h2 并且无法在 child 组件上更改它，因为它在 parent 组件模板上。

有什么建议吗？

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>

Angular 5 模板扩展

Angular 5 Template Extension

javascript

angular-routing

angular-template

angular