Question

我正在开发一个Angular4项目，并且我已经在 app.component.ts 上创建了一个过滤器，我目前正在 app.component上使用该过滤器。 HTML

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

我希望在 nav.component.html 上使用相同的过滤器在此文件中正常工作，但我希望避免在上再次重新创建过滤器代码nav.component.ts

有没有办法在 app.component.ts 的 nav.component.html 上使用此过滤器？

Answer 1

在一些新的.ts文件中迁移您创建的过滤器代码。使用file.ts语法中的import {ClassName}在app.component和其他组件中导入此文件，然后在组件html代码中轻松实现

Answer 2

您可以创建服务，例如＆＃34; filter.service.ts＆＃34;。服务中的好处是 - 它只会创建一个实例。所以你使用更少的内存，应用程序更快。然后 - 您可以将其包含在父模块中：

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>

Answer 3

@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
}

Javascript Angular使用来自不同.ts文件的代码

3 个答案: