redireccionar - rutas angular 6
¿Cuál es la forma correcta de configurar un Router & RouterLink en Angular2 Dart? (4)
Pregunta
: ¿Cuál es la forma correcta de configurar un
Router
&
RouterLink
en el
Angular2 Dart
?
main.dart
import ''package:angular2/angular2.dart'';
import ''package:angular2/router.dart'';
import ''package:angular2/src/reflection/reflection.dart'' show reflector;
import ''package:angular2/src/reflection/reflection_capabilities.dart'' show ReflectionCapabilities;
@Component(
selector: ''home''
)
@View(
template: ''<h1>I am Home</h1><a router-link="child">Go Child</a>'',
directives: const [RouterOutlet, RouterLink]
)
class Home {}
//
//
//
@Component(
selector: ''child''
)
@View(
template: ''<h1>I am Child</h1><a router-link="home">Go Home</a>'',
directives: const [RouterOutlet, RouterLink]
)
class Child {}
//
//
//
@Component(
selector: ''index''
)
@View(
template: ''''''
<router-outlet></router-outlet>
'''''',
directives: const [RouterOutlet, RouterLink]
)
class Index {
Router router;
Index(Router this.router) {
router.config({ ''path'': ''/child'', ''component'': Child, ''alias'': ''child''});
router.config({ ''path'': ''/'', ''component'': Home, ''alias'': ''home''});
}
}
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(Index, routerInjectables);
}
Aquí está mi enfoque:
En
router_link.dart
veo que
newHref
regresa como
null
onAllChangesDone() {
if (isPresent(this._route) && isPresent(this._params)) {
var newHref = this._router.generate(this._route, this._params);
this._href = newHref;
// Keeping the link on the element to support contextual menu `copy link`
// and other in-browser affordances.
print(''newHref'');
print(newHref);
DOM.setAttribute(this._domEl, "href", newHref);
}
Esto genera un error y elimina la solicitud de navegación.
Cadena esperada STACKTRACE: 0 BlinkElement.setAttribute_Callback_2 (dart: _blink: 7565)
1 BlinkElement.setAttribute_Callback_2_ (dart: _blink: 7566)
2 Element.setAttribute (dart: html: 13673)
3 BrowserDomAdapter.setAttribute (paquete: angular2 / src / dom / browser_adapter.dart: 258: 25)
4 RouterLink.onAllChangesDone (paquete: angular2 / src / router / router_link.dart: 66: 23)
A partir de Angular Dart 2.0.0 (candidato de versión), la sintaxis correcta para un enlace de enrutador es:
<a [router-link]="[''./Home'']">Go Home</a>
El valor es una lista de argumentos que se pasan a
Router.navigate()
.
La sintaxis correcta para configurar rutas es:
@Component(
selector: ''my-app'',
template: ...,
directives: const [ROUTER_DIRECTIVES],
providers: const [HeroService, ROUTER_PROVIDERS])
@RouteConfig(const [
const Route(
path: ''/dashboard'',
name: ''Dashboard'',
component: DashboardComponent,
useAsDefault: true),
const Route(
path: ''/detail/:id'', name: ''HeroDetail'', component: HeroDetailComponent),
const Route(path: ''/heroes'', name: ''Heroes'', component: HeroesComponent)
])
class AppComponent {
String title = ''Tour of Heroes'';
}
echa un vistazo a @ ngrx / router es una implementación de enrutador más simple para Angular 2 https://github.com/ngrx/router
puedes ver lo simple que es declarar rutas
import { Routes } from ''@ngrx/router'';
const routes: Routes = [
{
path: ''/'',
component: HomePage
},
{
path: ''/blog'',
component: BlogPage,
children: [
{
path: '':id'',
component: PostPage
}
]
}
]
y aquí hay un plunker de demostración http://plnkr.co/edit/7J6RrA?p=preview
Nota: a partir de AngularJS versión 1.2, ngRoute está en su propio módulo y debe cargarse cargando el archivo angular-route.js adicional, que descargamos a través de Bower arriba. app / index.html:
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
...
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
app / partials / phone-list.html:
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>