嵌套组件元素

Question

我陷在模板/组件问题上，找不到任何答案。

我正在尝试将普通的Javascript项目移至Angular2。 在我的项目中，我实际上是通过继承其他元素来创建一些元素的。 例：

文件header.html

<header class="some_class"></header>

文件header_base.html从header.html继承

<header> <!-- This is the header element from the header.html file. -->
  <img class="some_class" src="path/to/my/image">
  ...
</header>

编辑：为了阐明我的实际做法，“从另一个继承文件”，我使用Javascript。

我的问题是我找不到如何在Angular中做到这一点。 我的问题是，有什么方法可以完成类似的工作，还是我需要改变“模板化”事情的方式？

预先感谢。

Answer 1

您的问题有点令人困惑。 您能否提供有关最终结果应该是什么的更多详细信息？

听起来您正在寻找的是影子dom插入点，您可以在其中插入可以放入内容的组件。 在哪里有一个名为Header的组件，该组件应用了一些标记和样式，但是随后可以在具有不同内容的不同地方使用它？

如果是这样，这是您的操作方法（注意：这是Typescript，但可以使用纯Javascript完成。请查看Angular文档以获取示例）：

CustomHeader.ts：

@Component({
  selector: 'custom-header',
  template: '<header class="some-class"><ng-content></ng-content></header>'
})
export class CustomHeader {
  //if you need any logic in that component
}

然后，在需要使用此组件的任何组件中，都将其导入：

app.ts：

import {CustomHeader} from './CustomHeader';
@Component({
     selector: "my-app",
     directives: [CustomHeader],
     template: `<div>
                  <custom-header>
                       <img class="some_class" src="path/to/my/image" />
                  </custom-header>
                </div>`
})

结果是，当您在html中使用该组件时，其内容将被CustomHeader模板的内容包装。 不知道这是否正是您的需求。

编辑：这是一篇描述此类组件的好文章： http : //blog.thoughtram.io/angular/2015/03/27/building-a-zippy-component-in-angular-2.html