Question

我有一个应用程序，其内部组件功能很少，我想使其更具可读性-正确的方法/最佳实践是什么：

需要服务并注入建设中吗？还是带有函数的单独类（比如说MyClass.class.ts）？然后导入该类并在组件中创建一个新对象：

let myObj = new MyClass();

哪个带我问下一个问题：

如果我使用创建服务的第一个选项，或者使用创建单独的类的第二个选项，我可以将服务/类的属性绑定到组件视图吗？

意味着，假设服务看起来像这样：

export class MyService {
    a: string = 'Hello world'; 
    b: number;

    c(): number {
      this.b += 1;
      return b;
   }

}

和组件：

export class myComponent {
     constructor(myService: myService){}

     ngOnInit {
       this.myService.c();
 }

，然后在HTML模板中执行以下操作：

<p>{{a}}</p>
<p>{{b}}</p>

因此它将输出a和b的值。

问题是，是否通过将服务注入组件，就可以将属性绑定到HTML模板中？

在上课的情况下，类似：

export class MyClass {
     a: string = 'Hello world'; 
     b: number;

    c(): number {
      this.b += 1;
      return b;
   }
}



import { MyClass } from './
export class myComponent {

    constructor(){}
    let myClass = new MyClass();

    ngOnInit {
      this.c();
    }  

}

这只是我情况的一般描述。事实是，我只有几百行好几行代码，所有功能都应该在一个组件下，所以我在考虑应该创建一个新类或服务，但是如果我可以将类/服务中的属性绑定到组件的html模板。

这是指，如果通过注入服务/创建类的新对象，则可以将属性绑定到组件的html模板中？

谢谢。

Answer 1

首先，您不应该在其他类中初始化类，因为这是获得耦合应用程序的方式。

Angular为您提供依赖注入，使您的生活更轻松。使用它。

第二，如果您在a，b和c的地方拥有服务，则应首先确定要公开的服务。

如果c返回转换后的b，则b对于该特定服务应该是私有的，并且不应该公开。

如果您要尝试做的全部是有意公开所有服务属性和方法，以便可以绑定它们在您的组件中，那么您需要确保首先是这样指代您的服务名称：

服务：

export class MyService {
        a: string = 'Hello world'; 
        b: number = 1;

        c(): number {
          this.b += 1;
          return this.b;
    }
}

component.ts：

export class myComponent {
    constructor(public myService: MyService){}
}

component.html：

<p>{{myService.a}}</p>
<p>{{myService.b}}</p>
<p>{{myService.c()}}</p>

Answer 2

从angular.io：

在同一文件中有多个类可能会造成混淆。我们通常建议您在以下位置定义组件和服务单独的文件。

如果您确实将组件和服务组合在同一个文件中，则它是重要的是先定义服务，然后再定义组件。如果你在服务之前定义组件，您将获得运行时null 参考错误。

可以借助如本博客文章中所述的forwardRef（）方法（http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html）。

您还可以使用正向引用来打破循环依赖关系。参见DI Cookbook中的示例（https://angular.io/guide/dependency-injection-in-action#forwardref）。

因此，简而言之，建议为组件和服务使用单独的文件，但在谨慎操作下仍可以将它们放在一个文件中。

Angular 4组件具有多个类

2 个答案: