Question

创建一个Web应用程序来显示一些新闻，我希望它是一个单页应用程序，其中文章显示为列表，仅显示标题，（当点击标题时），打开以显示内容。 / p>

我已经完成了，但现在我想修改网址，以便它适应打开的文章而无需重新加载整个页面。我已经按照子路由组件和一些答案在这里，但没有其他任何事情发生

无法找到加载''的主要插座

显示在控制台中。这是代码：

app / app.routes.ts：

import { provideRouter, RouterConfig }  from '@angular/router';
import { articlesRoutes } from './articles/articles.routes';
import { ArticlesComponent } from "./articles/articles.component";

const routes: RouterConfig = [
    ...articlesRoutes,
];

export const appRouterProviders = [
    provideRouter(routes)
];

app / articles / articles.routes.ts：

import {ArticlesComponent} from "./articles.component";
import {RouterConfig} from "@angular/router";
import {ArticleDetailComponent} from "./detail/article-detail.component";

export const articlesRoutes: RouterConfig = [
    {
        path: '',
        component: ArticlesComponent,
        children: [
            {
                path: 'detail/:id',  component: ArticleDetailComponent
            },
        ]
    }
];

应用程序/物品/ articles.component.html

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ArticleService } from "./shared/article.service";
import { Article } from "./shared/article.model";
import { ArticleDetailComponent } from "./detail/article-detail.component";
import { ROUTER_DIRECTIVES }  from '@angular/router';

@Component({
    selector: 'fcso-articles',
    templateUrl: 'app/articles/articles.component.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [ArticleService],
})
export class ArticlesComponent implements OnInit {
    articles: Article[] = [];
    articleOpened: Article = null;
    error: any;

    constructor(
        private articleService: ArticleService,
        private router: Router) {}

    getArticles() {
        this.articleService
            .getArticles()
            .then(articles => this.articles = articles)
            .catch(error => this.error = error);
    }

    ngOnInit() {
        this.getArticles();
    }

    //function changing the hidden article and redirecting to URL
    gotoDetail(article: Article) {
        this.articleOpened = article;
        this.router.navigate(['', '/detail', this.articleOpened.id]);
    }
}

的index.html

    <body>
      <!-- the main content (from app.component.ts) is not loaded from router -->
      <fcso-main>
        Loading...
      </fcso-main>
    </body>

应用程序/ app.component.html

<div class="container">
    <div class="col-xs-12 col-md-8 col-md-offset-2 fcso-no-padding">
        <div class="panel panel-default">
            <div class="panel-body">
                <h1 class="text-center">Title</h1>
            </div>
        </div>
        <!-- this router outlet should show articlesComponent -->
        <router-outlet></router-outlet>
    </div>
</div>

应用程序/物品/ articles.component.html

<div class="panel panel-default" *ngFor="let article of articles">
    <div class="panel-heading fcso-panel-heading" *ngIf="article !== articleOpened" >
        <h3 class="text-center fcso-open-panel" (click)="gotoDetail(article)">{{article.title}}</h3>
    </div>
    <!-- router-outler is hidden to boost angular perfs and avoid troubles -->
    <router-outlet *ngIf="article === articleOpened"></router-outlet>
</div>

我还尝试将articles.routes.ts的内容直接移动到app.routes.ts，而不做任何更改。我试图只将父母放在app.routes.ts中。它加载文章列表，但不加载子内容，使用此错误代码：

无法找到加载'ArticleDetailComponent'
的主要插座

我试图在.component.ts中使用routerConfig，也没有影响。

我需要做些什么才能让孩子（ArticleDetailComponent）显示在点击标题的地方并修改网址？

Answer 1

您在<router-outlet>内创建*ngFor。只有一个<router-outlet>没有名称，其他人需要有不同的名称。使用*ngFor创建它们会创建无效的任意数量的无名<router-outlet>。
传播运算符缺失

const routes: RouterConfig = [
  ... articlesRoutes,
];

对于子路由缺少默认路由

export const articlesRoutes: RouterConfig = [
  { path: '', component: ArticlesComponent, children: [
    { path: '', redirectTo: 'detail/01', pathMatch: 'full'}, /* required */
    { path: 'detail/:id',  component: ArticleDetailComponent },
  ]}
];

Plunker example

在angular2

1 个答案: