Question

我是Angular的新手，我想知道如何将组件类拆分为多个文件。我正在处理的组件太大了，我想将方法移到单独的文件中。但是我不确定新文件中的函数，它们将如何访问类变量？我将通过一个简单的示例来尝试解释我的问题：

app.component.html

<div (click)="onSelectOne()">
    One
</div>
<div  (click)="onSelectOne()">
    Two
</div>

<div (click)="onSelectOne()">
    Three
</div>

component.ts

export class AppComponent implements OnInit {

    curr_login = "";
    selectedTool;
    websocket;

    constructor(private dataService: DataService) {}

    ngOnInit() {
    }

    onSelectOne(){

    }

    onSelectTwo(){

    }

    onSelectThree(){

    }


}

现在，我想将3种方法：onSelectOne，onSelectTwo和onSelectThree移到3个不同的文件中。我怎样才能做到这一点？另外，每个函数都使用curr_login，websocket或dataService之类的类变量，因此我将需要在新文件中以某种方式访问它们。

修改

这只是一个示例示例，而不是实际代码。在我的代码中，组件代码已经变得非常庞大，这就是为什么我想将功能移到单独的文件中。

Answer 1

您应该根据Angular指南将文件组织到模块（ngModules）中：

https://angular.io/guide/module-types

模块有5种基本类型：

域模块
路由模块
路由模块
服务模块
小部件模块

模块具有类似于类继承的层次关系，其中组件，指令和管道可以是模块专用的，也可以从其他模块导入（即继承），也可以导出以形成模块的公共接口。

服务通常包含在服务模块中（主要包含服务，没有声明），并以不同的方式使用（与组件，指令和管道使用的导入/导出系统不同）。服务已在注入器（通常是根注入器）中注册，并且DI允许将它们注入到支持DI的应用程序中的任何位置（即服务构造函数，组件构造函数，模块构造函数）

如果您有很多服务文件，我的建议是开始将服务组织到旨在由AppModule导入的服务模块（即Core模块）中。您可以按功能区域组织几个服务模块。

如果您有多个由多个功能模块共享的窗口小部件，则建议将它们组织在一个或多个窗口小部件模块中（主要包含声明，很少包含服务）。这些模块旨在由Domain功能模块导入。

考虑做这样的事情：

Answer 2

您应该创建一个服务以将函数移入其中。您将从DI中受益，并可以通过从组件构造函数等中注入所需的功能来重复使用这些功能。

https://angular.io/guide/architecture-services

Answer 3

这可以通过创建公用文件来实现，并且可以执行操作。这不是最好的方法，但是对于您来说，这就是答案。

util.ts

export function onSelectOne(curr_login, selectedTool, websocket){
   console.log(curr_login, selectedTool, websocket);
}
export function onSelectTwo(curr_login, selectedTool, websocket){
   console.log(curr_login, selectedTool, websocket);
}
export function onSelectThree(curr_login, selectedTool, websocket){
   console.log(curr_login, selectedTool, websocket);
}

//app.component.ts

import { onSelectOne, onSelectTwo, onSelectThree} from './utils';


export class AppComponent implements OnInit {

    curr_login = "";
    selectedTool;
    websocket;
    onSelectOne = onSelectOne;
    onSelectTwo = onSelectTwo;
    onSelectThree = onSelectThree;
    
    constructor(private dataService: DataService) {}

    ngOnInit() {
    }

}

<!-- app.component.html -->
<div (click)="onSelectOne(curr_login, selectedTool, websocket)">One</div>
<div  (click)="onSelectOne(curr_login, selectedTool, websocket)">Two</div>
<div (click)="onSelectOne(curr_login, selectedTool, websocket)">Three</div>

但是我建议创建服务并执行必要的操作。那将是最好的方法。

export class AppComponent implements OnInit {

    curr_login = "";
    selectedTool;
    websocket;

    
    constructor(private dataService: DataService) {}

    ngOnInit() {
    }
    
    onSelection(clicked){
     // Here we can call service which will do task. and if all three same operation we can make more simpler code here.
     
     this.someService.checkSomethig(clicked, curr_login, selectedTool, websocket);
       
    }


}

<div (click)="onSelection(1)">
  One
</div>
<div  (click)="onSelection(2)">
  Two
</div>
<div (click)="onSelection(3)">
  Three
</div>

我希望这会有所帮助

Answer 4

根据Angular指南，组件不应包含超过400行代码。您需要将业务逻辑从组件移动到可注入服务。这将使您的组件精益。组件的主要功能是

1）读取路由器参数 2）从服务中获取数据并分配给DOM并将数据提交给后端 3）模板/反应式表单创建逻辑 4）将数据传递到子组件并触发变更检测。 5）从子组件接收数据并更新DOM 6）处理模板DOM事件和重定向。

您可以创建一个子组件，并移动这三种方法共有的逻辑。您可以使用@Input传递数据，并使用@Output处理事件。

将function从component.ts文件移动到Angular中的单独文件中

4 个答案: