Angular 零碎知识整理(二)

_nghost and _ngcontent
Upon application startup (or at build-time with AOT), each component will have a unique property attached to the host element, depending on the order in which the components are processed: _nghost-c0, _nghost-c1, etc.
Together with that, each element inside each component template will also get applied a property that is unique to that particular component: _ngcontent-c0, _ngcontent-c1, etc.

---

:host selector
If we want to style the host element of the component itself, we need the special :host pseudo-class selector.

// :host combined with other selectors:
/* let's add another style to app.conmponent.css */
:host h2 {
   color: red;
}

/* generated at runtime */
[_nghost-c0]   h2[_ngcontent-c0] {
    color: red;
  }

---

::ng-deep pseudo-class selector
If we want our component styles to cascade to all child elements of a component, but not to any other element on the page, we can currently do so using by combining the :host with the ::ng-deep selector:

host ::ng-deep h2 {
    color: red;
}

/* generated at runtime */
<style>  
[_nghost-c0]  h2 {
    color: red;
}
</style>

So this style will be applied to all h2 elements inside app-root, but not outside of it as expected.

---

:host-context pseudo-class selector
Sometimes, we also want to have a component apply a style to some element outside of it. This does not happen often, but one possible common use case is for theme enabling classes.

For example, let's say that we would like to ship a component with multiple alternative themes. Each theme can be enabled via adding a CSS class to a parent element of the component.

Here is how we could implement this use case using the :host-context selector:

@Component({
selector: 'themeable-button',
template: `<button class="btn btn-theme">Themeable Button</button>`,
styles: [`
:host-context(.red-theme) .btn-theme {
  background: red;
}
:host-context(.blue-theme) .btn-theme {
  background: blue;
}`]
})

export class ThemeableButtonComponent {
}

These themed styles are deactivated by default. In order to activate one theme, we need to add to any parent element of this component one of the theme-activating classes.For example, this is how we would activate the blue theme:

<div class="blue-theme">
  <themeable-button></themeable-button>
</div>

---

Angular FormControl Directive

1. import { ReactiveFormsModule } from '@angular/forms';
2. use formControl from within our template and set it to some name, for example:
   <input type="text" [formControl]="term"/>
3. term automatically exposes an Observable<string> as property valueChanges that we can subscribe.

term = new FormControl();
......
this.term.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.switchMap(term => ...))
.subscribe(...

---