Angular2如何传递位于其他文件中的方法

时间:2016-03-10 15:59:19

标签: methods input routing angular

我在Angular2和打字稿中非常棒。

我想在其他文件中传递来自其他类的方法。

这是iam在具体谈论的文件我希望传递方法deleteCondition():

export class ConditionBuilderComponent implements OnInit {
    conditions: Condition[] = [];
    catalog: Condition[] = [];

constructor(private _conditionService: ConditionService) { }

getConditions() {
    this._conditionService.getConditions().then(conditions => this.catalog = conditions);
}

ngOnInit() {
    this.getConditions();
}

onChange(conditionsIndex, catalogIndex) {

    //console.log(selectedCondition);
    //console.log(conditionsIndex);
    console.log(catalogIndex);
    this.conditions[conditionsIndex] = this.catalog[catalogIndex];
}

newCondition() {
    this.conditions.push(this.catalog[0]);
}

deleteCondition() {
    this.conditions.pop();
}
}

我想将deleteCondition()方法传递给另一个文件,因为在另一个文件中,当然无法识别this.conditions.pop()。

首先它是这样的:https://www.dropbox.com/s/92z2oe7f4w5x2b5/conditions.jpg?dl=0

这里删除最后创建但我想分别删除每个条件:

https://www.dropbox.com/s/ptwq6sk6da4p21k/new.jpg?dl=0

这是SelectCondition的代码:

 import {Component} from 'angular2/core';
import {Condition} from './condition';
import {ConditionBuilderComponent} from "./conditionbuilder.component";

@Component({
    selector: 'select-condition',
    template: `
    <div class="col-xs-3">
        <div class="form-group">
            <select class="form-control" [(ngModel)]="selectedOperator">
                <option *ngFor="#operator of selectOperators">{{operator}}</option>
        </select>
    </div>
</div>
<div class="col-xs-3">
    <div class="form-group">
        <div class="input-group">
            <span class="btn-file">
                <input type="file" (click)="selectFile()" multiple />
            </span>

            <input type="text" [(ngModel)]="fileValue" class="form-control" readonly>

            <span class="input-group-addon">
                <span class="glyphicon glyphicon-folder-open"></span>
            </span>
        </div>
    </div>
</div>

<a class="btn btn-danger pull-right" (click)="deleteCondition()"><i class="glyphicon glyphicon-minus"></i></a>
`
})

export class SelectCondition extends Condition {
    public name: string = 'select';
    public fileValue: string;
    public selectedOperator: string = 'in';

    public selectOperators: Condition[] = [
        "in"
    ];

    selectFile() {
        $(document).on('change', '.btn-file :file', function() {
            var input = $(this),
                numFiles = input.get(0).files ? input.get(0).files.length : 1,
                label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
            input.trigger('fileselect', [numFiles, label]);
        });
    $('.btn-file :file').on('fileselect', function(event, numFiles, label) {
        var input = $(this).parents('.input-group').find(':text'),
            log = numFiles > 1 ? numFiles + ' files selected' : label;

        if( input.length ) {
            input.val(log);

            console.log(input.val());
        }
    });
}

deleteCondition = () => this.deleteCondition();
}

请帮帮我。

0 个答案:

没有答案