的Javascript角使用代碼文件

我工作的一個Angular4項目，我創建了一個過濾器上我目前使用我的app.component.html我app.component.ts 。的Javascript角使用代碼文件

<button (click)="filterBy('cars')">Cars</button>

該作品在該文件通過罰款我想利用這個相同的過濾器對我的nav.component.html，但我想，以避免重新創建過濾器的代碼再上nav.component.ts。

是否有使用我nav.component.html從app.component.ts這個過濾器的方法嗎？

來源

2017-05-26 dj2017

這看起來就像一個管道的良好用例。 – estus

您可以創建服務，例如「filter.service.ts」。好的服務是 - 它只會創建一個實例。所以你使用更少的內存，並且應用程序更快。那麼 - 你可以把它包括在父模塊：

import { FilterService } from "some/filter.service.ts"; 
@NgModule({ 
    declarations: [ AppComponent, NavComponent], 
    providers: [ FilterService ] 
}) 
export class MyModule { }

而在你的組件中使用這樣的：

import { FilterService } from "some/filter.service.ts"; 

constructor(filter: FilterService) { 
    this.filter = filter; 
}

然後你的HTML：

<button (click)="filter.filterBy('cars')">Cars</button>

來源

2017-05-26 08:21:45 Lazyexpert

我需要爲服務創建一個新文件並從app.component.ts中取出相關代碼嗎？ – dj2017

當然，方法'filterBy'應該移動到服務。 – Lazyexpert

如果需要提取方法的某些值，則在組件中創建另一個方法，調用「this.filter.filterBy」，該方法將返回所需的值。 – Lazyexpert

將您創建的過濾器代碼遷移到一些新的.ts文件中。通過使用進口{}類名從file.ts語法導入您的app.component和其他組件文件，然後輕鬆地實現它在組件的HTML代碼

來源

2017-05-26 08:20:29 HarryJs

@Injectable() 
export class Service{ 
    //create all the logic here for all the things you want to be shared across compponents 
} 

call this in the component you want to use like 

import {Service} from "../shared/service"; 

@Component({ 
    selector: 'app-angular4' 
}) 
export class Angular4Component implements OnInit { 
    constructor(private service:Service) { 

// resuse all the methods 
}

來源

2017-05-26 08:28:35

這與以下答案不同，因爲我們使用的角度DI應該在使用多個組件中使用的服務時使用 –

的Javascript角使用代碼文件

回答

相關問題