父级的角度指令更改子元素的类？答案

【问题标题】：Angular directive on parent to change class of a child element?父级的角度指令更改子元素的类？
【发布时间】：2018-06-18 18:41:29
【问题描述】：

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

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

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

<div ngbDropdown class="d-inline-block mr-2" #dateRange="ngbDropdown">
    <button class="btn btn-primary-bottom"
        ngbDropdownToggle>
            {{ startDate | date }} - {{ endDate | date }}
    </button>
    <div ngbDropdownMenu  autoClose="outside">
        <button class="dropdown-item"
            (click)="dateSelectedFunction('year'); dateRange.close();">
                This Year
        </button>
        <div class="dropdown-divider"></div>
        <button class="dropdown-item"
            (click)="dateSelectedFunction('today'); dateRange.close();">
                Today
        </button>
        <button class="dropdown-item"
            (click)="dateSelectedFunction('yesterday'); dateRange.close();">
                Yesterday
        </button>
        <button class="dropdown-item"
            (click)="dateSelectedFunction('seven'); dateRange.close();">
                Last 7 days
        </button>
        <button class="dropdown-item"
            (click)="dateSelectedFunction('thirty'); dateRange.close();">
                Last 30 days
        </button>
        <button class="dropdown-item"
            (click)="dateSelectedFunction('ninety'); dateRange.close();">
                Last 90 days
        </button>
        <div class="dropdown-divider"></div>
        <button class="dropdown-item d-flex align-items-center"
            (click)="isCollapsed = !isCollapsed"
            [attr.aria-expanded]="!isCollapsed">
                Custom
                <span class="fa fa-chevron-down ml-auto"></span>
            </button>
        <div class="px-4 pb-2"
            [ngbCollapse]="isCollapsed">
                <label><small>Start Date</small></label>
                <input class="form-control form-control-sm"
                    type="date"
                    style="width: 200px;"
                    [(ngModel)]="startDate">
                <label><small>End Date</small></label>
                <input class="form-control form-control-sm"
                    type="date"
                    style="width: 200px;"
                    [(ngModel)]="endDate">
        </div>
    </div>
</div>

【问题讨论】：

标签： angular

【解决方案1】：

这里不需要任何指令。只是一个@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>

【讨论】：

将属性绑定到字符串时不要忘记内引号：[buttonclass]="'btn-white-bottom'"。
谢谢我需要考虑使用@Input 和@Output 更多。我忘记了。