Pregunta Cómo usar rutas secundarias en Angular 2


Versión angular 2: 2.0.0-alpha.44

He intentado enrutar en Angular 2. Aunque pude hacer el enrutamiento normal, tengo problemas cuando introduzco rutas secundarias. Aquí está el ejemplo en plnkr (http://plnkr.co/edit/Y5doqU1WcEe4Ldr7KfPJ)

A continuación se muestra el código para referencia rápida. Estoy tratando de lograr el enrutamiento por debajo

                                  App
                                  /\
                                 /  \
                             HomeCmp HelloCmp
                                      \
                                       \
                                     ChildCmp

Y a continuación es cómo he configurado mis caminos

import {bootstrap, bind, Component, View} from 'angular2/angular2'
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, APP_BASE_HREF, ROUTER_BINDINGS} from 'angular2/router'

@Component({
  selector: 'child-cmp'
})
@View({
  template: `
    <div>
      <h3>Whats up</h3>
    </div>
  `
})
class ChildCmp { }

// ************************ Hello Component ***********************************
@Component({
  selector: 'hello-cmp'
})
@View({
  template: `
    <div>
      <h2>Hello there !</h2>
      <router-outlet></router-outlet>
    </div>
  `,
  directives: ROUTER_DIRECTIVES
})
@RouteConfig([
  {path: '/', component: ChildCmp, as: 'ChildCmp'}
])
class HelloCmp { }

//************************** HOME Component ***********************************
@Component({
  selector: 'home-cmp'
})
@View({
  template: `
    <div>
      <h2>Welcome Home</h2>
    </div>
  `
})
class HomeCmp {}

//************************* APP Component *************************************
@Component({
  selector: 'app-cmp'
})
@View({
  template: `
    <div>
      <h1>Hello {{message}}!</h1>
      <a [router-link]="['./HomeCmp']">home</a>
      <a [router-link]="['./HelloCmp']">hello</a>
      <hr>
      <router-outlet></router-outlet>
    </div>
  `,
  directives: ROUTER_DIRECTIVES
})
@RouteConfig([
  {path: '/', component: HomeCmp, as: 'HomeCmp'}
  {path: '/hello/...', component: HelloCmp, as: 'HelloCmp'}
])
export class App {
  message:string = 'world';
}

bootstrap(App, [
  ROUTER_BINDINGS,
  bind(APP_BASE_HREF).toValue(location.pathname)
]);

Cuando elimino las rutas secundarias funciona bien. Pero con las rutas secundarias obtengo el siguiente error.

EXCEPTION: Link "["HelloCmp"]" does not resolve to a terminal or async instruction. in [null]

Seguí el artículo mencionado aquí. Pero no puede hacerlo funcionar. Puede ayudarme alguien, por favor ? Gracias


13
2017-11-21 05:57


origen


Respuestas:


Solo necesita importar el componente secundario en routerLink entonces tu código está funcionando bien. Por ejemplo:

<a [routerLink]="['./HelloCmp','ChildCmp']">hello</a>

Aquí está el plnkur de trabajo de su código. Código Plunker

Para obtener más información sobre este enrutamiento, consulte este número en github aquí

Actualizar a Angular 2 beta

A partir de Angular 2 beta algunos cambios están aquí:

  • router-link ha sido cambiado a enrutador Enlace

  • También puedes usar useAsDefault : true en lugar de proporcionar un hijo en el momento del enrutador, vincular así:

    {path: '/ blabla', componentes: ABC, nombre: ABC, useAsDefault: true}


11
2017-11-21 11:27



Angular4 enrutamiento infantil -

Permítanme primero definir la configuración de la ruta, cada ruta puede tener una   propiedad llamada niños donde se pueden definir las rutas secundarias de este   ruta.

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'find', redirectTo: 'search'},
  {path: 'home', component: HomeComponent},
  {path: 'search', component: SearchComponent},
  {
  path: 'artist/:artistId',
  component: ArtistComponent,
  children: [
  {path: '', redirectTo: 'tracks'}, ①
  {path: 'tracks', component: ArtistTrackListComponent}, ②
  {path: 'albums', component: ArtistAlbumListComponent}, ③
  ]
  },
  {path: '**', component: HomeComponent}
];
  1. Si un usuario navega para decir / artist / 1234 lo redirigirá a / artist / 1234 / tracks.
  2. Esta ruta coincide con una URL como / artist / 1234 / tracks.
  3. Esta ruta coincide con una URL como / artist / 1234 / albums.
<h1>Artist</h1>
<p>
  <a [routerLink]="['./tracks']">Tracks</a> |
  <a [routerLink]="['./albums']">Albums</a>
</p>
<router-outlet></router-outlet>

4
2017-08-30 14:37