在angular2中修改url時更改只是一部分dom

創建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修改顯示在點擊標題的地方？

來源

2016-07-30 Aridjar

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

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

您在*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

來源

2016-07-31 11:54:20

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

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

在angular2中修改url時更改只是一部分dom

回答

相關問題