more of me trying to teach myself stuff

1. Certainly it is possible to inject a service into a service at Angular 4. The service to be injected and the service to get the injection both go in the providers for the outermost module. Then at the service getting the injection two things happen. First the injected service is declared at the constructor as a variable as you might expect and secondly you will lead the declaration of the service getting the injection such as export class WhateverService with @Injectable() a needed form of "metadata" that may be looped in from @angular/core.
2. this.whateverService.myUpdate.subscribe(
      (whatever: string) => alert("it's: " + whatever);
   ); is an example of subscribing to an EventEmitter event at a service from a component. This is a good way to update state at one component from a parallel component that shares a service.
3. Here is an example of using the TypeScript spread operator to add the individual elements inside of an array to another array, not the array itself!
   let yin = [1,2,3,4];
   let yang = [5,6,7,8];
   yin.push(...this.yang);
4. Put a <router-outlet></router-outlet> tag inside of a component to have a nested component conditionally driven by routing! You need to wire up the routing in the outermost module wrapping everything. First loop in this import:
   import { Routes, RouterModule } from '@angular/router';
   Next, RouterModule needs to be added to the imports of the outermost module, but when doing so it should look like RouterModule.forRoot(myRoutes) and herein myRoutes is a variable that must be made elsewhere in the outermost module. It should be a const variable, probably placed above the @NgModule in the applicable file that looks something like this:
   const myRoutes = [
      {path: '', component: StartingOutComponent},
      {path: 'foo', component: FooComponent},
      {path: 'bar', component: BarComponent}
   ];
5. a tags with href="/" and href="/foo" and href="/bar" will successfully trigger the routes above no different than going in the url line to http://www.example.com/ and http://www.example.com/foo and http://www.example.com/bar but the problem with this is that, just like changing the URL line, the whole of the app refreshes and not just the component in the <router-outlet></router-outlet> tag. To restrain the change to desired bit of the app you should instead use routerLink="/" and routerLink="/foo" and routerLink="/bar" and a link to http://www.example.com/bar could also take the shape of [routerLink]="'/bar'" and [routerLink]="['/bar']" and a link to http://www.example.com/bar/baz/qux could look like [routerLink]="['/bar','baz','qux']" with only the first piece of the route getting a leading slash.
6. routerLinkActive="myClass" [routerLinkActiveOptions]="{exact:true}" in an a tag with a routerLink setting will apply myClass as a CSS class to the a tag if the route in routerLink is active, matching the route exactly. This gimmick is smarter than you might think. You could have it inline not at the a tag but at a list item wrapping the a tag and it will still somehow work. The routerLinkActiveOptions bit enforces exact matches so that a single slash by itself for the "home page" will not get matched when someone goes to /foo however if you always want /bar to be matched regardless of whether or not one is at /bar or at /bar/baz/qux maybe you should leave this setting off.
7. How may we navigate to a component/route programmatically in TypeScript? Alright, at a component you will want to loop in this import:
   import { Router } from '@angular/router';
   Then loop the Router in as a variable at the constructor like so:
   constructor(private myRouter: Router){
   And, finally, use the variable like this to have an absolute path to http://www.example.com/bar/baz/qux
   this.myRouter.navigate(['/bar','baz','qux']);
8. Alright, let's say that we are TypeScript side at the bar component for http://www.example.com/bar and we want a link that will navigate to http://www.example.com/bar/baz/qux moreover. Well, the three lines of code immediately above could be refactored to accommodate this while using a relative path.
   import { Router, ActivatedRoute } from '@angular/router';
   Then loop the Router in as a variable at the constructor like so:
   constructor(private myRouter: Router, private myActivatedRoute: ActivatedRoute){
   And, finally, use the variable like this to have an absolute path to http://www.example.com/bar/baz/qux
   this.myRouter.navigate(['baz','qux'], {relativeTo: this.myActivatedRoute});
   Outside of TypeScript, at routerLink links in HTML templates, leaving off the leading slash or having ../ is the way to get relative links to work. Do note that there is a distinction between a relative path from outside the components that change out at <router-outlet></router-outlet> and the outer component wrapping everything where the relative paths always behave as if coming off the root path. At components actually used in routes, relative paths at routerLink links are relative to the current route at hand so ../ off of http://www.example.com/bar is going to take one to http://www.example.com/
9. const myRoutes = [
      {path: '', component: StartingOutComponent},
      {path: 'foo', component: FooComponent},
      {path: 'foo/:id', component: SingleFooComponent},
      {path: 'bar', component: BarComponent}
   ]; shows off the ability to pass a variable at a route. Note that we will use a different component for /foo/whatever than for /foo.