angular2-services

Persisting and accessing values globally in multiple components in Angular 2

允我心安 提交于 2019-12-17 23:37:31
问题 I have a settings page where users can save some config variables, such as a Username. The user can also change the username on that page. But when I go to another Component (page) and back, the username isn't saved. I also want to show the username in the other components. How do I do that? With a global variable? Structure: - App - app.ts (main) - setting.ts - someOtherComponent.ts 回答1: What you need is a service to maintain the state of your variables. You would then be able to inject that

Angular 2 Component listen to change in service

淺唱寂寞╮ 提交于 2019-12-17 23:17:16
问题 I've a simple question about change detection. I have a component and a (global) service with a boolean inside. How can I make the component listen to that boolean and execute a function if that boolean changes? Thanks! 回答1: Depending on how that boolean changes you could expose it as an Observable<boolean> on your service, and then subscribe to that stream in your component. Your service would look something like: @Injectable() export class MyBooleanService { myBool$: Observable<boolean>;

Can you use @ViewChild() or similar with a router-outlet? How if so?

▼魔方 西西 提交于 2019-12-17 20:04:04
问题 I repeatedly run into a situation where I'd like to access a child component existing on the other side of a router outlet rather than a selector: Like: <router-outlet></router-outlet> NOT: <selector-name></selector-name> This conflicts with the ViewChild functionality as I know it, yet it seems like my component should be able to see and interact with what's inside that router-outlet just as easily as with what's inside a selector-tag. For instance I tried this: export class

Angular 2 HTTP “Cannot resolve all parameters for 'AppService'”

萝らか妹 提交于 2019-12-17 19:17:34
问题 I tried to import the http provider into a service, but I'm getting the following error: Cannot resolve all parameters for 'AppService'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AppService' is decorated with Injectable. Here are some code snippets: <script src="~/es6-shim/es6-shim.min.js"></script> <script src="~/systemjs/dist/system-polyfills.js"></script> <script src="~/angular2/bundles/angular2-polyfills.js"></script> <script

How to make a component universally accessible in Angular2

半城伤御伤魂 提交于 2019-12-17 18:42:02
问题 I basically want to create a custom dialog component that I can utilize from anywhere in my Angular2 app regardless of where the using component is in the application tree. For simplicity lets call this my SayHello Component. Consider the following application tree: So let's say i want SomeComponent.level3.component to call up the dialog in SayHello.component . In Angular 1.x I would inject RootScope into a controller and light up a dialog that way. Now, I understand (more or less) that for

Export class as interface in Angular2

风格不统一 提交于 2019-12-17 17:22:28
问题 Is there a way to export a class as interface and then import that interface in another module in Angular 2? I need to be able to inject the class in a constructor in some components e.g should be registered as provider. 回答1: In order to be used as both an interface and provider token, it may be abstract class. This is how it is done in Angular code base itself. If concrete class has something to inherit from abstract class, the latter can be extendable: export abstract class Foo { abstract

Plain Javascript as Angular 2 service

拜拜、爱过 提交于 2019-12-17 09:57:53
问题 I need to add a hosted third-party JavaScript file in an Angular 2 component. This file is updated anytime a change is made in the associated third-party vendors proprietary system, so I cannot simply pull down a copy, include it locally, and import it into the project. Typically I would include this file at a top level in a script tag, and then simply use declare <windowvar>: any to get access to it. However in this case, since the component itself is trying to load the script, I cannot

Angular 2 cache observable http result data [duplicate]

无人久伴 提交于 2019-12-17 05:55:32
问题 This question already has answers here : What is the correct way to share the result of an Angular Http network call in RxJs 5? (22 answers) Closed last year . I have a service that fetches data via the HTTP service and returns an observable object. After the first call I would like to cache the result internally in the service, and once a new component will try to get the data it will take it from the cached result. Is there a simple solution for this? 回答1: If you lean into observables as a

How to avoid imports with very long relative paths in Angular 2?

旧街凉风 提交于 2019-12-17 03:48:09
问题 How can I introduce something like 'my-app-name/services' to avoid lines like the following import? import {XyService} from '../../../services/validation/xy.service'; 回答1: TypeScript 2.0+ In TypeScript 2.0 you can add a baseUrl property in tsconfig.json : { "compilerOptions": { "baseUrl": "." // etc... }, // etc... } Then you can import everything as if you were in the base directory: import {XyService} from "services/validation/xy.service"; On top of this, you could add a paths property,

How to avoid imports with very long relative paths in Angular 2?

╄→尐↘猪︶ㄣ 提交于 2019-12-17 03:47:11
问题 How can I introduce something like 'my-app-name/services' to avoid lines like the following import? import {XyService} from '../../../services/validation/xy.service'; 回答1: TypeScript 2.0+ In TypeScript 2.0 you can add a baseUrl property in tsconfig.json : { "compilerOptions": { "baseUrl": "." // etc... }, // etc... } Then you can import everything as if you were in the base directory: import {XyService} from "services/validation/xy.service"; On top of this, you could add a paths property,