AngularJS - 将数据从一个指令传递到同一HTML文件中调用的组件

Question

在这个HTML文件中，

<fieldset class="row">
     <status-message status="housePlanEditCtrl.message"></status-message>
     <legend class="fieldset-legend">HVAC Design Report</legend>
     <file-manager
        upload-only="true"
        accept=".pdf, application/pdf"
        label="HVAC Design Report"
        input-id="HvacDesignReport"
        files="housePlanEditCtrl.housePlan.HvacDesignReport">
     </file-manager>
</fieldset>

我有一个自定义文件管理器指令，需要输入

const FILE_TYPE_ERROR = {
    type        : 'error',
    text        : 'File type not allowed.',
    dismissable : false
};
function fileManager ($timeout) {
    return {
        scope    : {
            LocalFiles : '='
        },
        restrict : 'A',
        link     : (scope, element, attrs, fileManagerCtrl) => {

            element.bind('change', function onChange (event) {
                let parentScope = scope.$parent.$parent;
                $timeout(()=>{
                    if (this.accept === 'application/pdf') {
                        var ext = this.value.match(/\.(.+)$/)[1];
                        switch (ext) {
                        case 'pdf':
                            break;
                        default:
                            alert('File type error.');
                            this.message = Object.assign({}, FILE_TYPE_ERROR);
                            this.value = '';
                        }
                    }
                    parentScope.fileManagerCtrl.files.push.apply(parentScope.fileManagerCtrl.files, _values(event.target.files));
                    parentScope.fileManagerCtrl.localSelectedCallback();
                }, 0);
            });
        }
    };
}

以及控制器内发生的错误的状态消息组件。

<div class="status-message" data-ng-class="[statusMessageCtrl.getTypeClass(), {'dismissable' : statusMessageCtrl.status.dismissable}]" data-ng-if="statusMessageCtrl.isVisible">
    <p class="status-text">{{statusMessageCtrl.status.text}}</p>
    <button
        data-ng-if="statusMessageCtrl.status.dismissable"
        data-ng-click="statusMessageCtrl.onDismiss()"
        type="button"
        class="btn btn-dismiss btn-link btn-no-label"
        aria-label="Dismiss Message">

        <i class="fa fa-close" aria-hidden="true"></i>
    </button>
</div>

我希望能够在通过文件管理器指令上载错误的类型文件时显示该消息组件。每当发生此类错误时，我如何将消息从文件管理器传递到状态消息指令？

Answer 1

要在两个子组件之间进行通信，您需要从一个组件设置@output并将其作为输入提供给其他组件。在您的第一个子组件中，创建一个输出属性，该属性将事件发送到父组件。

{ 

@Output() voted = new EventEmitter<boolean>();
didVote = false;

vote(agreed: boolean) {
this.voted.emit(agreed);
this.didVote = true;
}

}

现在，设置一个方法来处理父组件中的该事件。这里app-voter是你的子组件，它发出@output :(已投票），它将被发送到名为“onVoted（$ event）”的父权限中的方法。

{
<app-voter *ngFor="let voter of voters"
[name]="voter"
(voted)="onVoted($event)">
</app-voter>
}

进入该方法后，可以将该值分配给局部变量，然后将其作为@input传递给其他子组件

{
   <second-child-comp (input_name)="your_variable_Value"></second-child-comp>
}

更多去这里，https://angular.io/guide/component-interaction