Angular2从服务更新模板

我是Angular2的新手，开始编写一个应用程序，其中所有方法都在

main.ts

中，而该文件又在

main.html

中引用了它的视图。我将此应用程序重构为子组件和服务。因此，我现在有：

- app.component.ts
- app.html
- sub.component.ts
- sub.html
- data.service.ts

sub.component

作为指令包含在

app.component

中

app.component

注入

数据.service

，我可以通过

app.component

中的点击事件调用该服务

问题

---

以前，我可以通过组件中的函数更新视图上的进度条。既然函数已经在它自己的服务中，那么如何向用户更新服务中长期运行（递归）方法的进度？我假设我必须将进度从服务传递到

app.component

或

sub.component

，但这意味着如何完成？

您需要从组件（或两个组件）订阅服务

您可以在引导上提供服务（并且它将可用于您的所有组件）

或在组件中提供，并提供：

@Component({selector: "cmp", provide: [YourService]})

看看这个例子：

---

您需要从组件（或两个组件）订阅服务

您可以在引导上提供服务（并且它将可用于您的所有组件）

或在组件中提供，并提供：

@Component({selector: "cmp", provide: [YourService]})

看看这个例子：

您可以使用将值传递给组件。在服务中创建发射器并在组件中订阅

// data.service.ts
class DataService() {
  progress = new EventEmitter();

  longRunningMethod() {
    this.progress.emit(value);
  }
}

// app.component.ts
class AppComponent() {
  constructor(service: DataService) {
    service.progress.subscribe(value => console.log(value));
  }
}

可以使用将值传递给组件。在服务中创建发射器并在组件中订阅

// data.service.ts
class DataService() {
  progress = new EventEmitter();

  longRunningMethod() {
    this.progress.emit(value);
  }
}

// app.component.ts
class AppComponent() {
  constructor(service: DataService) {
    service.progress.subscribe(value => console.log(value));
  }
}

---

当然，没问题。请注意一件事：若您在应用程序引导中提供服务，那个么在您订阅的所有组件中，它都是该类的同一对象。如果您为每个组件提供它，那么您每次都在创建新对象。当然，没问题。请注意一件事：若您在应用程序引导中提供服务，那个么在您订阅的所有组件中，它都是该类的同一对象。如果为每个组件提供，则每次都在创建新对象。