Vraag: wat is de juiste manier om een Router
in te stellen & RouterLink
in de 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);
}
Dit is mijn aanpak:
In router_link.dart
zie ik newHref
terugkomen als 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);
}
Dit resulteert in een fout en stopt het navigatieverzoek.
String verwacht
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(package:angular2/src/dom/browser_adapter.dart:258:25)
4 RouterLink.onAllChangesDone(package:angular2/src/router/router_link.dart:66:23)
Antwoord 1, autoriteit 100%
Vanaf Angular Dart 2.0.0 (release candidate), de juiste syntaxisvoor een routerlink is:
<a [router-link]="['./Home']">Go Home</a>
De waarde is een lijst met argumenten die worden doorgegeven aan Router.navigate()
.
De juiste syntaxisvoor het configureren routes is:
@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';
}
Antwoord 2
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>
Antwoord 3
bekijk @ngrx/router het is een eenvoudigere routerimplementatie voor Angular 2
https://github.com/ngrx/router
u kunt zien hoe eenvoudig het is om routes aan te geven
import { Routes } from '@ngrx/router';
const routes: Routes = [
{
path: '/',
component: HomePage
},
{
path: '/blog',
component: BlogPage,
children: [
{
path: ':id',
component: PostPage
}
]
}
]
en hier is een demo-plunker http://plnkr.co/edit/7J6RrA?p= voorbeeld
Antwoord 4
Opmerking:Vanaf AngularJS versie 1.2 bevindt ngRoute zich in zijn eigen module en moet deze worden geladen door het extra bestand angular-route.js te laden, dat we hierboven downloaden via Bower.
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>