嵌套的组件元素

Nested components elements

本文关键字：元素 组件 嵌套      更新时间：2023-09-26

我遇到了一个模板/组件问题，找不到任何答案。

我正试图将一个简单的Javascript项目转移到Angular2。在我的项目中，我实际上通过继承其他元素来创建一些元素。示例：

文件头.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中找不到如何做到这一点。我的问题是，有什么方法可以完成这样的事情吗？或者我需要改变我的"模板化"方式吗？

提前谢谢。

您的问题有点令人困惑。你能提供更多关于最终结果的细节吗？

听起来您正在寻找的是shadow-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
}

然后在任何需要使用该组件的组件中，您都可以导入它：

应用程序：

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

相关文章：