嵌套组件元素

Question

我遇到了 template/component 个问题，找不到任何答案。

我正在尝试将普通 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>

编辑：为了阐明我实际上是怎么做的，'inherits file from another'，我使用 Javascript.

我的问题是我无法在 Angular 中找到如何做到这一点。我的问题是，是否有任何方法可以完成类似的事情，或者我是否需要改变 'templating' 事情的方式？

提前致谢。

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

嵌套组件元素

Nested components elements

javascript

angular