创建一个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)显示在点击标题的地方并修改网址?
答案 0 :(得分:0)
您在<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 },
]}
];