example - router events angular 6

Router Angular2 VS ui-router-ng2 VS router ngrx

Question

¿Cuáles son los beneficios y las desventajas de usar ui-router-ng2 lugar del nuevo enrutador Angular2? En el pasado utilicé ui-router con Angular 1.x en lugar de usar ngRoute, porque necesito un mejor soporte para estados / rutas anidados.

Entonces, ¿qué hay de Angular2? Me gustaría escucharlo para poder evaluar ambas oportunidades.

Además, buscando y buscando en Google, encontré ngrx/router , que no sabía. ¿Puede decirme cuáles son las diferencias entre el enrutador incorporado de Angular2, el nuevo enrutador ui para Angular2 y el enrutador ngrx ?

Answer 1

Información general

NGRX Route r ngrx/router

ngrx enrutador está en desuso! Existe una estrategia de migración del enrutador ngrx al enrutador estándar Angular2.

Documentos de Angular2 Router

1. Solución predeterminada del equipo angular
2. Fue inspirado por UI-enrutador de AngularJS
3. Construido para componentes

Angular2 Router tiene casi todas las características de UI-router.

NG2 UI-enrutador docs

Bien conocido router UI de AngularJS actualizado para Angular2. De las ventajas conocidas: hace una actualización más fluida desde el enrutador UI de AngularJS a enrutador UI ng2.

Comparando

Comparemos la sintaxis del router UI en ambas versiones con Angular2 Router.

AngularJS UI-enrutador :

app.config(function($stateProvider){
    $stateProvider.state(''home'', {
        url: ''/home'',
        templateUrl: ''home.html'',
        controller: ''HomeCtrl''
    })
});

Angular2 UI-enrutador :

export let state1: Ng2StateDeclaration = {
    name: ''home'',
    component: HomeComponent,
    url: ''/home''
}

@NgModule({
 imports: [
   SharedModule,
   UIRouterModule.forChild({ states: [home] })
 ],
declarations: [HomeComponent]
})
export class MyModule {}

Enrutador Angular2 :

( Actualización: propiedad: el name se eliminó después de V3-alpha7. Porque no funcionó con la carga diferida de las rutas).

import {
    RouteConfig,
    Route
} from ''angular2/router'';
import {HomeComponent} from ''./components/home'';

@Component({})
@RouteConfig([
    new Route({ 
        path: ''/home'', 
        component: HomeComponent, 
        name: ''Home'' // Deprecated property, works until v3-alpha7
    })
])
export class App {...}

Como podemos ver, en general, Angular2 Router es prácticamente lo mismo. Como complemento, es necesario decir que es compatible con la mayoría de las funciones comunes, como compartir datos estáticos / dinámicos a través de rutas, vistas anidadas, etc.

• Mismas estrategias de ubicación (ruta y hash)
• Definiciones de rutas similares
• Servicios similares:
  • $ state.go y Router.navigate
  • $ stateParams y RouteParams
  • $ state.current.data y RouteData
• Directivas similares
  • ui-view y router-outlet
  • ui-sref y routerLink

Conclusión

Angular2 Router había aprovechado al máximo la experiencia de enrutador de UI y lo implementó. Si necesita migrar fácilmente su base de código con AngularJS UI-router a Angular2 de manera rápida y sin problemas, puede probar Ng2 UI-router, de lo contrario, creo que Angular2 Router se ajustará mejor. Incluso si decidió utilizar el enrutador UI NG2, verifique todos los pros y contras, en el momento actual siento que la comunidad va a elegir una solución estándar del equipo Angular, lo que significa un mejor soporte.