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

嵌套组件元素

1 个答案: