代码之家  ›  专栏  ›  技术社区  ›  Amir Popovich

创建包装模板组件并注入内部组件模板

  •  1
  • Amir Popovich  · 技术社区  · 6 年前

    我想创建一个模板组件包装器来包装我的自定义模板。

    我需要这是一个组件,因为我不想在里面注入东西和做一些逻辑。

    这是一个使用hello包装器的简单示例my component:

    @Component({
      selector: 'my-component',
      template:
      `<hello><div>This is my component</div></hello>`
    })
    export class MyComponent{}
    

    我希望输出如下:

    <div>
      <div>hello component intro</div>
      <div>This is my component</div> <!-- This is the injection I'm looking for -->
      <div>hello component outro</div>
    </div>
    

    你好组件:

    @Component({
      selector: 'hello',
      template:
       `<div>
          <div>hello component intro</div>
             #####Inject here#####
          <div>hello component outro</div>
       </div>`
    })
    export class HelloComponent{}
    

    有什么方法可以将模板注入包装器组件吗?

    如果有帮助的话,我用的是角度版本6。

    1 回复  |  直到 6 年前
        1
  •  2
  •   Sunil Singh    6 年前

    你要找的是 Content Projection .

    只是使用 <ng-content></ng-content> 在要动态注入内容的组件中。

    hello.component.ts你好

    @Component({
      selector: 'hello',
      template:
       `<div>
          <div>hello component intro</div>
             <ng-content></ng-content> <!-- CONTENT WILL BE ADDED HERE -->
          <div>hello component outro</div>
       </div>`
    })
    export class HelloComponent{}
    

    惯例用法

    <hello>
      <div>This is my component</div> <!-- This is the injection I'm looking for -->
    </hello> 
    

    它将产生

    <div>
      <div>hello component intro</div>
      <div>This is my component</div> <!-- This is the injection I'm looking for -->
      <div>hello component outro</div>
    </div>