創建Web應用程序以顯示某些新聞,我希望它是單頁應用程序,其中的文章以列表形式顯示,僅顯示標題和(點擊在標題上),打開以顯示內容。在angular2中修改url時更改只是一部分dom
我已經這樣做了,但現在我想修改url,以便它適應打開的文章,而無需重新加載整個頁面。我跟着孩子路由組件和這裏的一些答案,但沒有什麼事情發生,一個
無法找到主要出口到裝載'在控制檯中顯示
。下面是代碼:
應用程序/ 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)
];
應用/文章/ 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的內容直接移動到應用程序.routes.ts,沒有任何改變。我試圖只把app.routes.ts中的父項。它裝載的物品清單,但它不會加載子內容,此錯誤代碼:
無法找到主要出口到裝載「ArticleDetailComponent」
我試圖在使用routerConfig .component.ts,也沒有影響。
我需要做些什麼才能讓孩子(ArticleDetailComponent)通過URL修改顯示在點擊標題的地方?
你可以在''中刪除'* ngIf'嗎?它可能會干擾Angular路由器的工作方式。 –
它沒有改變任何東西。當我在孩子身上發生錯誤時,我嘗試過,但仍然沒有任何改變。我認爲這是因爲articles.component.ts => gotoDetail(),它在調用路由器之前顯示了router-outlet。 – Aridjar