Angular 零碎知识整理(一)
routing-strategies
https://codecraft.tv/courses/angular/routing/routing-strategies/
HashLocationStrategy PathLocationStrategy
three types of direction
- Component
- Structural Directives like *ngIf, *ngFor
change the DOM layout by adding/removing DOM elements - Attribute Directives like ngStyle
give custom behaviour or style to the existing elements by appling some functions
Exception: Expression has changed after it was checked.
This is not a bug, it's a feature of dev mode working as intended. Calling enableProdMode( ) - see updated plunk when bootstrapping the app prevents the exception from being thrown.
That said, it's being thrown for good reason: In short, after every round of change detection, dev mode immediately performs a second round to verify that no bindings have changed since the end of the first, as this would indicate that changes are being caused by change detection itself.
@HostBinding and @HostListener
Two decorators in Angular that can be really useful in custom directives.
@HostBinding lets you set properties on the element or component that hosts the directive.
@HostListener lets you listen for events on the host element or component.
By using them we can both listen to output events from our host element and also bind to input properties on our host element as well.
examples of possible bindings:
* @HostBinding(‘class.active’)
* @HostBinding(‘disabled’)
* @HostBinding(‘attr.role’)
preventDefault()
preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be useful when:
Clicking on a "Submit" button, prevent it from submitting a form
Clicking on a link, prevent the link from following the URL
Note: Not all events are cancelable. Use the cancelable property to find out if an event is cancelable.
Note: The preventDefault() method does not prevent further propagation of an event through the DOM. Use the stopPropagation() method to handle this.
@ViewChildren and @ContentChildren
@ViewChildren Return specific elements or directives from the view DOM as QueryList.
It supports directive or component type as parameter(the return value will be the component/directive instance), or the name of a template variable(the return value will be a reference to the native element).
QueryList is just a fancy name for an object that stores a list of items. What is special about this object is when the state of the application changes Angular will automatically update the object items for you.
QueryList implements an iterable interface, therefore, it can be used in Angular templates with the ngFor directive.
The QueryList is initialized only before the ngAfterViewInit lifecycle hook, therefore, is available only from this point.
@ContentChildren includes only elements that exists within the ng-content tag. Returns the specified elements or directives from the content DOM as QueryList.
AsyncPipe
AsyncPipe is a convenience function which makes rendering data from observables and promises much easier.
For promises it automatically adds a then callback and renders the response.
For Observables it automatically subscribes to the observable, renders the output and then also unsubscribes when the component is destroyed so we don’t need to handle the clean up logic ourselves.
