AngularJS - передача данных из одной директивы в компонент, вызываемый в том же файле HTML - PullRequest
Новая
       14

AngularJS - передача данных из одной директивы в компонент, вызываемый в том же файле HTML

0 голосов
/ 22 февраля 2019

В этом 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>

Я хочу иметь возможность отображать этот компонент сообщения всякий раз, когда файл неправильного типа загружен через директиву файлового менеджера.Как я могу передать сообщение из файлового менеджера в директиву сообщения о состоянии при возникновении такой ошибки?

1 Ответ

0 голосов
/ 23 февраля 2019

Для связи между двумя дочерними компонентами необходимо настроить @output из одного компонента и передать его в качестве входных данных для другого.в своем первом дочернем компоненте создайте выходное свойство, которое отправляет событие родительскому компоненту. 

{ 

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

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

}

Теперь настройте метод для обработки этого события в родительском компоненте.здесь app-voter - ваш дочерний компонент, который испускает @output: (voted), который будет отправлен методу родительского компонента с именем: "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

...