具有多个类的 Angular 4 组件

Question

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

有服务并注入建设？ 或一个单独的类（假设 MyClass.class.ts）具有功能？ 然后导入类并在组件中创建一个新对象：

let myObj = new MyClass(); 

这让我想到下一个问题：

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

意思是，假设服务看起来像这样：

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

组件.ts：

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

组件.html：

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

Answer 2

来自angular.io：

在同一个文件中有多个类可能会令人困惑。 我们通常建议您在单独的文件中定义组件和服务。

如果您在同一个文件中合并了一个组件和服务，那么首先定义服务，然后定义组件是很重要的。 如果在服务之前定义组件，则会收到运行时空引用错误。

可以在本博客文章（ http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular- ）中解释的 forwardRef() 方法的帮助下首先定义组件2.html ）。

您还可以使用前向引用来打破循环依赖。 请参阅 DI Cookbook ( https://angular.io/guide/dependency-injection-in-action#forwardref ) 中的示例。

所以简而言之，建议为组件和服务分别设置文件，但您仍然可以将它们放在一个文件中，但要注意一些事项。