2016-07-30 74 views
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,也沒有影響。

我需要做些什麼才能讓孩子(ArticleDetailComponent)通過URL修改顯示在點擊標題的地方?

+0

你可以在''中刪除'* ngIf'嗎?它可能會干擾Angular路由器的工作方式。 –

+0

它沒有改變任何東西。當我在孩子身上發生錯誤時,我嘗試過,但仍然沒有任何改變。我認爲這是因爲articles.component.ts => gotoDetail(),它在調用路由器之前顯示了router-outlet。 – Aridjar

回答

0
  • 您在*ngFor內部創建<router-outlet>。只有一個<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

+0

謝謝你的回答。我不得不說,我已經在堆棧溢出中讀了一個名字的建議(對於),但我記得它不在這個版本的角度路由中。另外,它不在官方文檔中,所以,我應該使用選擇器嗎? 關於您對所需元素的建議(最後一點)。難道它不會阻止通過調用「ArticleDetailComponent」來使用我的「ArticlesComponent」中的內容? – Aridjar

+0

它被稱爲輔助路由,它有一些有限的支持,但是應該在下一次更新時修復一些錯誤。 「必需」,因此當頁面加載時沒有任何路徑時不會導致錯誤。你也可以使用'component:DummyComponent'而不是'redirectTo:'....'在這種情況下不顯示任何東西。 –