在其他文件中的組件之間共享數據

我想將組件中的數據共享到其他文件中的其他組件。我創建了一個對象/類的數組，我想在點擊刪除按鈕後刪除它們。在這個文件中是創建的數據：在其他文件中的組件之間共享數據

@Component({ 
selector: 'condition-builder', 
templateUrl: 'app/conditionbuilder.component.html', 
providers: [ConditionService], 
directives: [ConditionDetailComponent] 
}) 

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（）;在此文件中：

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() { 
    console.log('check'); 
    conditions.pop(); 
} 
}

如何訪問當前條件中的數據並將其刪除。爲了清楚這裏有一些截圖：

首先它是這樣的：https://www.dropbox.com/s/92z2oe7f4w5x2b5/conditions.jpg?dl=0這裏它刪除最後創建。

，但我想單獨刪除每個條件是這樣的：https://www.dropbox.com/s/ptwq6sk6da4p21k/new.jpg?dl=0

來源

2016-03-11 Sreinieren

你需要這樣引導您的應用程序時指定服務提供商：

bootstrap(AppComponent, [ConditionService]);

這樣你會分享你的服務的同一個實例在注入時跨越整個應用程序。

請小心刪除組件的任何providers屬性中的服務。

您也可以注入你的服務到您的SelectCondition服務：

@Injectable() 
export class SelectCondition extends Condition { 
    constructor(private service: ConditionService) { 
    } 

    deleteCondition() { 
    console.log('check'); 
    service.conditions.pop(); 
    } 
}

不要忘記這樣引導您的應用程序時，還添加此服務：

bootstrap(AppComponent, [ConditionService, SelectCondition]);

來源

2016-03-11 10:06:36

我得到一個錯誤信息：錯誤：無法讀取未定義的屬性'getOptional'（...）下面是一個plunker不能正常工作，但您可以看到文件結構： http://plnkr.co/edit/WRSbdQkla3uQlW3HLx Qd？p =預覽 – Sreinieren

您在哪個級別發生此錯誤？ –

將SelectCondition添加到bootstrap（ConditionBuilderComponent，[ConditionService，SelectCondition]）;之後，不要忘記從'ConditionBuilderComponent' –

在其他文件中的組件之間共享數據

回答

相關問題