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