Angular 创建自定义结构指令

一周前我开始学习Angular2和最新的angular4，现在我需要创建一个自定义的结构指令来显示其中的内容

说明：我有一个由一对字符串组成的数组的元素，让我们调用数组标题n个元素中的第一个元素和第二个描述 这就是结果

（数组来自后端，我正在通过模拟数组文件模拟它）

现在，如果我调用我需要创建的结构化指令，我希望它显示我将在该调用下编写的内容

例如：

<ng-template aulos-configuration-item-toolbar>
    <button (click)="click()">just click</button>
</ng-template>

点击

这应该只呈现我在标签之间写的按钮，现在，我有：

import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";

@Directive({ 
    selector: "[aulos-configuration-item-toolbar]",

})

export class AulosConfigurationItemToolbar {
    public templateRef: TemplateRef<any>;

    constructor(templateRef: TemplateRef<any>) {
        this.templateRef = templateRef;
    }
}

import{Directive，Input，TemplateRef，ViewContainerRef}来自“@angular/core”；
@指令（{
选择器：“[aulos配置项工具栏]”，
})
导出类AuloConfigurationItemToolbar{
公共templateRef:templateRef；
构造函数（templateRef:templateRef）{
this.templateRef=templateRef；
}
}

有人能给我更好地解释一下该怎么做吗？非常感谢。

让我解释一下 组件看起来像这样

export class GridOptionsComponent { }
@Directive({ selector: 'grid-options' })

@Component({
    selector: 'my-grid',
    moduleId: module.id,
    templateUrl: './grid.component.html'
})
export class GridComponent {
    ....
    ....
}

grid.component.html看起来像

 <div class="col-md-3">
    <div> some more html elements, components </div>

    <ng-content select="grid-options"></ng-content>
 </div>

还有一些html元素、组件

在另一个组件中的用法应该是

<my-grid>
   <grid-options>
        <button >Add</button>
        <button >View</button>
   </grid-options>
</my-grid>

添加
看法

您阅读了吗？我已将其导入到NgModule上的app.module.ts“GridComponent”中，并且已将其导出以向所有组件公开。然后在另一个组件上，我导入了GridComponent，但是没有找到我的网格，比如如果我没有在app.module上导入它，删除它编译是可以的，没有错误，但是没有显示按钮（如果我们可以通过电子邮件交谈会更好：fede）。benedetti9@gmail.com，速度会更快，我将用最终答案更新此问题）谢谢，BTW这是唯一的，它只是向你展示我的文件，让你更好地了解我的问题你的解决方案，因为我在互联网上读到的是不推荐的，现在也使用，我需要传递一个项目到ng模板，让项目我需要更好地了解一个指令是如何建立的，希望你能帮助我^^“正如我在互联网上看到的那样，您的解决方案已被弃用“，提供任何参考资料？我会在下一篇评论中发表我所读到的内容，我会做，但现在，我需要使用ng模板和自定义指令来帮助做这件事。如果你觉得我身边有攻击性，我很抱歉，我不应该是那样的Pm me，如果你想，我们会在那里讨论^^不，没有什么事情，你需要看，模板已弃用，应使用ng模板。。。然而，你真正需要的是ng内容。。。如果你能理解其中的区别。。