angular – 创建自定义结构指令

发布时间：2020-12-17 17:00:05 所属栏目：安全来源：网络整理

导读：我一周前开始学习Angular2和最新的angular4,现在我需要创建一个自定义结构指令来显示其中的内容. 说明：我有一对字符串数组的元素让我们调用数组标题的n个元素的第一个元素和第二个描述这是https://ibb.co/i23Dxa的结果 (数组来自后端,我通过模拟数组文件模

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

说明：我有一对字符串数组的元素让我们调用数组标题的n个元素的第一个元素和第二个描述
这是https://ibb.co/i23Dxa的结果

(数组来自后端,我通过模拟数组文件模拟它)

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

例：

<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;
    }
}

有人可以更好地解释我的进展方式吗？非常感谢.

解决方法

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

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>

并且应该在另一个组件中使用

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!