Angulaire 2 routeur-prise de courant à l'intérieur de modèle de composant

J'ai été jouer avec des parcours Angulaire 2 mais j'ai une question que je ne trouve pas de réponse. Mes itinéraires sont "travail", mais pas de la façon dont je suis l'espoir. Je suis en train de l'utiliser comme vous le feriez utiliser ng-view angulaires 1, mon en-tête et pied de page ne changera jamais, et lors de mes changements de l'url de nouveaux "trucs" est placé dans le contenu de mon.

Voici ce que j'ai maintenant, ce qui "fonctionne"

import { Component } from '@angular/core';
import { HeaderComponent } from './shared/header/header.component';
import { ContentComponent } from './shared/content/content.component';
import { FooterComponent } from './shared/footer/footer.component';
import { TestComponent } from './components/test.component';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';

@Routes([
    {path: '/test', component: TestComponent }
])
@Component({
    selector: 'app',
    template: `<header></header>
    <a [routerLink]="['/test']">Click for testComponent</a>
    <router-outlet></router-outlet>
    <footer></footer>`,
    directives: [HeaderComponent, ContentComponent, FooterComponent, ROUTER_DIRECTIVES]
})
export class AppComponent { }

Ce que je suis en train de faire est de mettre le routeur de sortie à l'intérieur de mon ContentComponentde sorte que l'essentiel, le routeur juste vide le nouvelles choses directement dans la zone principale de mon application. Quand j'ai essayer de réécrire:
<router-outlet></router-outlet>
comme
<content><router-outlet></router-outlet></content>
le routage des arrêts de travail, pas de message d'erreur, s'arrête juste. J'ai aussi ne pas voir mon testComponent dans les DOM quand je l'inspecter avec les devtools. Alors j'ai pensé, eh bien, je mettrai le routeur de sortie à l'intérieur du modèle de mon ContentComponent comme suit:

import { Component } from '@angular/core';

@Component({
    selector: 'content',
    template: `<router-outlet></router-outlet>`
})
export class ContentComponent { }

Cependant lorsque je fais ceci, j'obtiens le message d'erreur: Impossible de trouver la valeur par défaut de la sortie.

Me manque quelque chose, mais le manque de documentation rend très difficile à comprendre, je pense qu'il y aurait un moyen de définir dans @des Routes où ma prise mais encore une fois, ne peut pas trouver toute la documentation qui n'est pas pour le obsolète-routeur. J'espère que quelqu'un peut jeter quelque lumière sur ce point. Merci à l'avance.

Remarque: le code général des critiques serait également utile, je suis très nouveau à Angulaires 2 et aimerais l'avis.

Avez-vous un Itinéraire pour ContentComponent? Si oui, pouvez-vous s'il vous plaît montrer que?
quand vous dites route, entendez-vous comme un chemin d'accès? si oui il serait boilerPlate\app\shared\content\content.component.ts, Si non pouvez-vous expliquer ce que vous entendez par la route?
Non, je voulais dire quelque chose comme ceci {path: '/test", composant: TestComponent } que vous avez défini pour TestComponent. Fondamentalement, je veux savoir comment l'itinéraire passe à ContentComponent de AppComponent. Il n'est pas dans votre code comme il est ici.
Ma deuxième question est que pourquoi vous avez besoin de la deuxième routeur-prise en ContentComponent du modèle? Votre installation grâce à en avoir un dans AppComponent avec en-Tête et Pied de page ci-dessus et ci-dessous, il semble bon et devrait faire le travail pour vous.
Je suis en train de structure comme ceci @Component({ selector: 'app', template: <header></header> <a [routerLink]="['/test']">Cliquez pour testComponent</a> <contenu></contenu> <footer></footer>, directives: [HeaderComponent, ContentComponent, FooterComponent, ROUTER_DIRECTIVES] }) Cela comprend <contenu> Je peux mettre le texte de démonstration dans des contextes modèle et je le vois où je veux sur l'écran, j'ai donc pensé que par la logique, y compris les <routeur de sortie-> affichage, tout comme mon test de texte.

OriginalL'auteur Colton Williams | 2016-06-06

  1. 5

    La façon dont vous appelez ContentComponent via <content> étiquette de ContentComponent un enfant de votre AppComponent et vous ne pouvez pas placer un routeur-prise de courant à l'intérieur d'un enfant du composant de modèle. Une façon de parvenir à ce que vous êtes après est de créer une route par défaut pour le ContentComponent dans le AppComponent:

    @Routes([
    { path: '/', component: ContentComponent }
    { path: '/content', component: ContentComponent }
])

    Et AppComponent du modèle:

    <header></header>     
<router-outlet></router-outlet>
<footer></footer>

    Maintenant, vous pouvez définir imbriqués les routes dans votre ContentComponent comme ceci:

    @Routes([
    { path: 'content1', component: Content1Component }
])
@Component({
    selector: 'content',
    template: `<router-outlet></router-outlet>`
})
export class ContentComponent { }

    Et si vous avez un menu dans votre composant d'en-tête et souhaitez associer à chaque contenu imbriqué vous pouvez faire ceci:

    <a [routerLink]="['/content', 'content1']">Content1</a>

    Qui vous permettra de charger Content1Component dans le ContentComponent de <router-outlet>

    Je vais essayer cela dès que je travaille demain, je pense que cela est juste. Il semble familier, mais maintenant, cela fait sens! Merci! Je vais vous laisser savoir ce qui se passe.
    Bien sûr, laissez-moi savoir si cela ne fonctionne pas et nous allons le faire fonctionner 🙂
    Ça marche!!!, c'est ce que j'essayais de faire. J'en ai une questions. Est-ce le "droit"/manière prévue à l'approche de routage dans Angulaire 2, ou suis-je, il le piratage de le faire fonctionner comme angulaire 1?
    Non, je ne pense pas que c'est un hack ou quoi que ce soit, c'est la façon dont je le fais dans mon projet et ont vu faire de la même façon sur d'autres exemples à travers le web. Juste être conscient que la RC1 Routeur a quelques bugs et problèmes qui seront corrigés dans la version finale.
    Est-il possible d'utiliser [routerLink] à l'intérieur d'autres composants (comme le pied de page)? Dans Angular1 je peux utiliser href='#whatever-view' partout, mais en Angular2 si j'utilise href='my-link', l'ensemble de l'application permettra de recharger, utiliser [routerLink] m'a donné ORIGINAL EXCEPTION: No provider for Router! erreur...

    OriginalL'auteur Morteza Manavi