2
ニュースを表示するために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も影響を与えませんでした。
クリックしたタイトルの場所にURLを変更して子供（ArticleDetailComponent）を表示させるにはどうすればよいですか？
''で '* ngIf'を削除できますか？角度ルータが動作する方法を妨げる可能性があります。 –
何も変わっていません。私は子供に誤りがあったときに、何も変えなかった。私はそれがarticles.component.ts => gotoDetail（）であると考えています。これはルータを呼び出す前にルータ出口を表示します。 – Aridjar