Question

我是Angular的新手并且在我去这里学习，所以我没有冒险进入自定义指令。我有一个组件，我需要能够将一个指令传递给父元素<app-date-range></app-date-range>，并将一个类传递给组件中的子元素，以便我可以用{{1}更改btn-primary-bottom来自btn-white-bottom

<app-date-range></app-date-range>

这是完整的组件模板供参考：

<button class="btn btn-primary-bottom"
    ngbDropdownToggle>
        {{ startDate | date }} - {{ endDate | date }}
</button>

Answer 1

这里不需要任何指示。只是一个@Input，所以带有input属性的组件标签看起来像这样：

<app-date-range [buttonclass]="'btn-white-bottom'"></app-date-range>

然后在app-date-range组件类中，您需要添加一个带@Input装饰器的属性，如下所示：

@Input() buttonclass: string;

然后，组件模板中的按钮HTML将如下所示：

<button class="btn" [ngClass]="buttonclass" ngbDropdownToggle>
    {{ startDate | date }} - {{ endDate | date }}
</button>

父级的Angular指令改变子元素的类？

1 个答案: